To completely stop processing, modern browsers
support the stopImmediatePropagation
method.
It not only prevents bubbling, but also stops event
processing on the current element. Let's apply it:
elem1.addEventListener('click', function() {
console.log('green');
});
elem2.addEventListener('click', function(event) {
console.log('blue - the first handler');
event.stopImmediatePropagation(); // stops the bubbling
});
elem2.addEventListener('click', function() {
console.log('blue - the second handler'); // won't work anymore
});
elem3.addEventListener('click', function() {
console.log('red');
});
You can check: