Interruzione del bubbling degli eventi in JavaScript
Il bubbling di un evento può essere interrotto su qualsiasi
elemento attraverso cui l'evento sta risalendo.
Per fare ciò, nel codice dell'elemento, bisogna chiamare
il metodo stopPropagation dell'oggetto Event.
Nel seguente esempio, un click sul blocco rosso verrà attivato su di esso, poi sul blocco blu e basta - il blocco blu interrompe l'ulteriore bubbling e il blocco verde non reagirà in alcun modo:
elem1.addEventListener('click', function() {
console.log('verde');
});
elem2.addEventListener('click', function(event) {
console.log('blu');
event.stopPropagation(); // fermiamo il bubbling
});
elem3.addEventListener('click', function() {
console.log('rosso');
});
Puoi verificare:
