stopPropagation vs stopImmediatePropagation

Définition

stopPropagation empêche l'evenement de remonter/descendre aux parents mais exécute les autres listeners du même élément. stopImmediatePropagation arrête aussi les listeners suivants sur le même élément.

Analogie

stopPropagation = fermer la porte de ta chambre (les voisins n'entendent plus). stopImmediate = aussi couper le son dans ta chambre (même toi tu n'entends plus).

Exemple de code

el.addEventListener('click', (e) => {
  e.stopPropagation(); // parent ne recoit pas
});
el.addEventListener('click', (e) => {
  e.stopImmediatePropagation();
  // les listeners suivants sur el sont aussi stoppes
});

Cas d'usage

Empêcher un modal de se fermer quand on clique a l'intérieur, isoler des composants.

Anti-pattern

Termes liés