Arrêt de la propagation d'événements en JavaScript

La propagation d'un événement peut être arrêtée à n'importe quel élément traversé par l'événement. Pour cela, il faut appeler la méthode stopPropagation de l'objet Event dans le code de l'élément.

Dans l'exemple suivant, un clic sur le bloc rouge déclenchera un événement sur lui-même, puis sur le bloc bleu et c'est tout - le bloc bleu arrête la propagation ultérieure et le bloc vert ne réagira d'aucune manière :

javascriptelem1.addEventListener('click', function() {
  console.log('vert');
});
elem2.addEventListener('click', function(event) {
  console.log('bleu');
  event.stopPropagation(); // arrêtons la propagation
});
elem3.addEventListener('click', function() {
  console.log('rouge');
});

Vous pouvez vérifier :