Použití zastavení propagace událostí v JavaScriptu

Nechť uvnitř jednoho rodiče máme tlačítko a určitý blok:

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

Získáme odkazy na naše elementy do proměnných:

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

Nechť je náš blok zpočátku skrytý:

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

Uděláme to, aby po kliknutí na tlačítko se náš blok zobrazil:

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

A nyní uděláme to, aby po kliknutí na jakékoliv místo rodiče se náš blok skryl:

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

Čeká nás však nepříjemné překvapení: protože tlačítko je uvnitř rodiče, tak kliknutí na tlačítko zároveň znamená i kliknutí na rodiče. To znamená, že nejprve se náš blok zobrazí, a poté kvůli propagaci události se spustí obslužná rutina v rodiči a náš blok se skryje.

Zde se nám bude hodit možnost zrušit propagaci: můžeme udělat to, aby při kliknutí na tlačítko a zrušení propagace, rodič na toto kliknutí nereagoval.

Samostatně implementujte korektní fungování popsané úlohy.