Applicazione dell'arresto della propagazione degli eventi in JavaScript

Supponiamo che all'interno di un genitore abbiamo un pulsante e un blocco:

html<div id="parent">
  <button>click me</button>
  <div id="block">
    text
  </div>
</div>

Otteniamo i riferimenti ai nostri elementi in variabili:

javascriptlet parent = document.querySelector('#parent');
let button = document.querySelector('button');
let block  = document.querySelector('#block');

Supponiamo che il nostro blocco sia inizialmente nascosto:

css#block:not(.active) {
  display: none;
}

Facciamo in modo che cliccando sul pulsante il nostro blocco venga mostrato:

javascriptbutton.addEventListener('click', function() {
  block.classList.add('active');
});

E ora facciamo in modo che cliccando su qualsiasi punto del genitore il nostro blocco venga nascosto:

javascriptparent.addEventListener('click', function() {
  block.classList.remove('active');
});

Tuttavia, ci aspetta una sorpresa: poiché il pulsante si trova all'interno del genitore, un clic sul pulsante significa anche un clic sul genitore. Ciò significa che prima il nostro blocco verrà mostrato, e poi a causa della propagazione dell'evento scatterà il gestore nel genitore e il nostro blocco verrà nascosto.

Ed è qui che ci torna utile la possibilità di annullare la propagazione: possiamo fare in modo che cliccando sul pulsante venga annullata la propagazione, così che il genitore non reagisca a questo clic.