Primena zaustavljanja šírenja događaja u JavaScript-u

Neka unutar jednog roditelja imamo dugme i neki blok:

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

Hvatamo reference na naše elemente u promenljive:

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

Neka naš blok inicijalno bude skriven:

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

Učinimo da se na klik dugmeta naš blok pojavi:

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

A sada učinimo da se na klik bilo kog mesta roditelja naš blok sakrije:

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

Međutim, čeka nas iznenađenje: pošto je dugme unutar roditelja, klik na dugme istovremeno znači i klik na roditelja. To znači da će se prvo naš blok pojaviti, a zatim će se zbog šírenja dogadjaja aktivirati obrađivač u roditelju i naš blok će se sakriti.

I tu nam dolazi u pomoć mogućnost da otkažemo šírenje: možemo učiniti da pri kliku na dugme, otkazivanjem šírenja, roditelj ne reaguje na taj klik.

Samostalno implementirajte korektan rad opisanog zadatka.