Het stoppen van event bubbling in JavaScript
Event bubbling kan worden gestopt op elk
element waar het event doorheen bubbelt.
Hiervoor moet je in de code van het element
de methode stopPropagation van het object Event aanroepen.
In het volgende voorbeeld zal een klik op het rode blok worden uitgevoerd op zichzelf, daarna op het blauwe blok en dat is het - het blauwe blok stopt verdere bubbeling en het groene blok zal niet meer reageren:
elem1.addEventListener('click', function() {
console.log('groen');
});
elem2.addEventListener('click', function(event) {
console.log('blauw');
event.stopPropagation(); // stop de bubbling
});
elem3.addEventListener('click', function() {
console.log('rood');
});
Je kunt het testen:
