stopPropagation vs stopImmediatePropagation

Definition

stopPropagation empeche l'evenement de remonter/descendre aux parents mais execute les autres listeners du meme element. stopImmediatePropagation arrete aussi les listeners suivants sur le meme element.

Analogie

stopPropagation = fermer la porte de ta chambre (les voisins n'entendent plus). stopImmediate = aussi couper le son dans ta chambre (meme 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

Empecher un modal de se fermer quand on clique a l'interieur, isoler des composants.

Anti-pattern

Termes lies