Unterbrechung des Event-Bubbling in JavaScript
Das Bubbling eines Events kann auf jedem
Element gestoppt werden, durch das das Event aufsteigt.
Dazu sollte im Code des Elements die Methode
stopPropagation des Objekts Event aufgerufen werden.
Im folgenden Beispiel wird der Klick auf den roten Block bei ihm selbst ausgelöst, dann beim blauen Block und das war's - der blaue Block stoppt das weitere Bubbling und der grüne Block wird überhaupt nicht reagieren:
elem1.addEventListener('click', function() {
console.log('grün');
});
elem2.addEventListener('click', function(event) {
console.log('blau');
event.stopPropagation(); // Bubbling stoppen
});
elem3.addEventListener('click', function() {
console.log('rot');
});
Sie können es überprüfen:
