Zatrzymywanie propagacji zdarzeń w JavaScript

Propagację zdarzenia można zatrzymać na dowolnym elemencie, przez który zdarzenie się propaguje. Aby to zrobić, w kodzie elementu należy wywołać metodę stopPropagation obiektu Event.

W następującym przykładzie kliknięcie czerwonego bloku zadziała na nim samym, następnie na niebieskim bloku i to wszystko - niebieski blok zatrzymuje dalszą propagację i zielony blok już w żaden sposób nie zareaguje:

javascriptelem1.addEventListener('click', function() {
  console.log('zielony');
});
elem2.addEventListener('click', function(event) {
  console.log('niebieski');
  event.stopPropagation(); // zatrzymaj propagację
});
elem3.addEventListener('click', function() {
  console.log('czerwony');
});

Możesz to sprawdzić: