Interrompendo a propagação de eventos em JavaScript
A propagação de um evento pode ser interrompida em qualquer
elemento através do qual o evento esteja se propagando.
Para isso, no código do elemento, deve-se chamar
o método stopPropagation do objeto Event.
No exemplo a seguir, o clique no bloco vermelho será acionado nele mesmo, depois no bloco azul e pronto - o bloco azul interrompe a propagação adicional e o bloco verde não responderá de forma alguma:
elem1.addEventListener('click', function() {
console.log('verde');
});
elem2.addEventListener('click', function(event) {
console.log('azul');
event.stopPropagation(); // interrompe a propagação
});
elem3.addEventListener('click', function() {
console.log('vermelho');
});
Você pode testar: