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:

javascriptelem1.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: