Zastavení propagace událostí v JavaScriptu

Propagaci události lze zastavit na libovolném prvku, kterým událost probublává. K tomu je třeba v kódu prvku zavolat metodu stopPropagation objektu Event.

V následujícím příkladu kliknutí na červený blok se aktivuje na něm samotném, poté na modrém bloku a to je vše - modrý blok zastaví další propagaci a zelený blok již nijak nezareaguje:

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

Můžete vyzkoušet: