Aplicarea opririi propagării evenimentelor în JavaScript

Să presupunem că în interiorul unui părinte avem un buton și un anumit bloc:

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

Obținem referințele la elementele noastre în variabile:

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

Să presupunem că blocul nostru este inițial ascuns:

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

Să facem astfel încât la click pe buton blocul nostru să apară:

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

Și acum să facem astfel încât la click pe orice loc al părintelui blocul nostru să se ascundă:

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

Cu toate acestea, ne așteaptă o surpriză neașteptată: deoarece butonul se află în interiorul părintelui, click-ul pe buton înseamnă simultan și click pe părinte. Aceasta înseamnă că mai întâi blocul nostru va apărea, iar apoi datorită propagării evenimentului se va activa handler-ul din părinte și blocul nostru va dispărea.

Și iată că ne este utilă posibilitatea de a anula propagarea: putem face astfel încât la click pe buton să anulăm propagarea, părintele să nu reacționeze la acest click.