Immediate termination of bubbling in JavaScript
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: