Zastavenie propagácie udalostí v JavaScripte

Propagáciu udalosti je možné zastaviť na akomkoľvek elemente, cez ktorý udalosť prechádza. Na to je potrebné v kóde elementu zavolať metódu stopPropagation objektu Event.

V nasledujúcom príklade kliknutie na červený blok sa vykoná na ňom samotnom, potom na modrom bloku a to je všetko - modrý blok zastaví ďalšiu propagáciu a zelený blok už nijako nezareaguje:

javascriptelem1.addEventListener('click', function() {
  console.log('zelený');
});
elem2.addEventListener('click', function(event) {
  console.log('modrý');
  event.stopPropagation(); // zastavíme propagáciu
});
elem3.addEventListener('click', function() {
  console.log('červený');
});

Môžete vyskúšať: