Oprirea propagării evenimentelor în JavaScript

Propagarea unui eveniment poate fi oprită la orice element prin care evenimentul se propagă. Pentru aceasta, în codul elementului trebuie apelată metoda stopPropagation a obiectului Event.

În următorul exemplu, click-ul pe blocul roșu se va declanşa pe el însuși, apoi pe blocul albastru și asta este tot - blocul albastru oprește propagarea ulterioară și blocul verde nu va reacționa în niciun fel:

javascriptelem1.addEventListener('click', function() {
  console.log('verde');
});
elem2.addEventListener('click', function(event) {
  console.log('albastru');
  event.stopPropagation(); // oprim propagarea
});
elem3.addEventListener('click', function() {
  console.log('roșu');
});

Puteți verifica: