Stoppe hendelsesbobling i JavaScript

Hendelsesbobling kan stoppes på ethvert element som hendelsen bobbler gjennom. For å gjøre dette må du kalle metoden stopPropagation på Event-objektet.

I følgende eksempel vil et klikk på den røde blokken utløses på den selv, deretter på den blå blokken og det er alt - den blå blokken stopper videre bobling og den grønne blokken vil ikke reagere:

javascriptelem1.addEventListener('click', function() {
  console.log('grønn');
});
elem2.addEventListener('click', function(event) {
  console.log('blå');
  event.stopPropagation(); // stopper boblingen
});
elem3.addEventListener('click', function() {
  console.log('rød');
});

Du kan teste det: