Aplikácia zastavenia propagácie udalostí v JavaScripte

Nech je vo vnútri jedného rodiča naše tlačidlo a nejaký blok:

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

Získame odkazy na naše elementy do premenných:

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

Nech je náš blok spočiatku skrytý:

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

Urobme to, aby sa po kliknutí na tlačidlo náš blok zobrazil:

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

A teraz urobme to, aby sa po kliknutí na akékoľvek miesto rodiča náš blok skryl:

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

Čaká nás však nepríjemné prekvapenie: pretože tlačidlo sa nachádza vo vnútri rodiča, kliknutie na tlačidlo zároveň znamená aj kliknutie na rodiča. To znamená, že najprv sa náš blok zobrazí a potom kvôli propagácii udalosti sa spustí obsluha v rodičovi a náš blok sa skryje.

Tu sa nám zíde možnosť zrušiť propagáciu: môžeme urobiť to, aby pri kliknutí na tlačidlo sa zrušila propagácia a rodič na toto kliknutie nereagoval.

Samostatne implementujte korektnú fungovanie opisanej úlohy.