Aplicarea opririi propagării evenimentelor în JavaScript

Să presupunem că în interiorul unui părinte avem un buton și un anumit bloc:

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

Obținem referințele la elementele noastre în variabile:

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

Să presupunem că blocul nostru este inițial ascuns:

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

Să facem astfel încât la click pe buton blocul nostru să apară:

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

Și acum să facem astfel încât la click pe orice loc al părintelui blocul nostru să se ascundă:

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

Cu toate acestea, ne așteaptă o surpriză neașteptată: deoarece butonul se află în interiorul părintelui, click-ul pe buton înseamnă simultan și click pe părinte. Aceasta înseamnă că mai întâi blocul nostru va apărea, iar apoi datorită propagării evenimentului se va activa handler-ul din părinte și blocul nostru va dispărea.

Și iată că ne este utilă posibilitatea de a anula propagarea: putem face astfel încât la click pe buton să anulăm propagarea, părintele să nu reacționeze la acest click.

Implementați independent funcționarea corectă a sarcinii descrise.