Applicazione dell'arresto della propagazione degli eventi in JavaScript

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

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

Otteniamo i riferimenti ai nostri elementi in variabili:

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

Supponiamo che il nostro blocco sia inizialmente nascosto:

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

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

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

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

parent.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.

Implementate autonomamente il funzionamento corretto del compito descritto.