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