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:
elem1.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:
