Aplikácia zastavenia propagácie udalostí v JavaScripte

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

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

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

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

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

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

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

javascriptbutton.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:

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