Stoppe event bubbling i JavaScript

Event bubbling kan stoppes på ethvert element, som eventet bobbler gennem. For at gøre dette skal man i elementets kode kalde metoden stopPropagation på Event-objektet.

I det følgende eksempel vil et klik på den røde blok udløse på den selv, derefter på den lyseblå blok og så stop - den lyseblå blok stopper den videre bobbling og den grønne blok vil ikke reagere:

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

Du kan afprøve det: