Zastosowanie zapobiegania propagacji zdarzeń w JavaScript

Załóżmy, że wewnątrz jednego rodzica mamy przycisk i pewien blok:

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

Pobierzmy referencje do naszych elementów do zmiennych:

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

Załóżmy, że nasz blok jest początkowo ukryty:

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

Sprawmy, aby po kliknięciu przycisku nasz blok został pokazany:

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

A teraz sprawmy, aby po kliknięciu w dowolne miejsce rodzica nasz blok został ukryty:

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

Czeka nas jednak niespodzianka: ponieważ przycisk znajduje się wewnątrz rodzica, kliknięcie przycisku jednocześnie oznacza kliknięcie rodzica. Oznacza to, że najpierw nasz blok się pokaże, a następnie z powodu propagacji zdarzenia uruchomi się procedura obsługi w rodzicu i nasz blok się ukryje.

Tutaj przyda nam się możliwość anulowania propagacji: możemy sprawić, że przy kliknięciu przycisku anulujemy propagację, rodzic nie zareaguje na to kliknięcie.