Stoppa event-bubbling i JavaScript

Event-bubbling kan stoppas på vilket element som helst som eventet bubblar igenom. För att göra detta ska man anropa metoden stopPropagation på objektet Event i elementets kod.

I följande exempel kommer ett klick på den röda blocken att utlösas på den själv, sedan på den blåa blocket och sedan inget mer - det blå blocket stoppar ytterligare bubbling och det gröna blocket kommer inte att reagera:

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

Du kan testa: