¿Para qué es el stopImmediatePropagation
y qué ventajas tendría al usarlo?
Cuando se asocian múltiples controladores de evento a un elemento, estos se ejecutan en el orden en el que se asociaron. stopImmediatePropagation
hace que se detengan las llamadas a los controladores subsecuentes.
Es importante recalcar que no sólo evita que se ejecuten el resto de controladores de evento asociados a ese elemento, sino que también llama a stopPropagation
, pot lo que se evita que se llame a los controladores de evento de los ancestros.
¿Qué diferencia existe al usar stopPropagation
contra stopImmediatePropagation
o utilizarlas en conjunto?
stopPropagation
hace que se detenga propagación de eventos hacia los ancestros del elemento (que se pare el efecto "burbuja"). Por ejemplo, en el script anterior, cuando se hacía return false
en jQuery (y por tanto se ejecutaba stopPropagation
), sólo se ejecutaba el controlador de evento del a
pero no el del div
.
Pero si el elemento tiene más controladores de evento, stopPropagation
no los detendrá, sólo parará la propagación a los ancestros. Con stopImmediatePropagation
, sí que se detiene la propagación a los controladores asociados a ese elemento.
Además, como también decía en el punto anterior, stopImmediatePropagation
llama a stopPropagation
. Es por ello que no tiene sentido usarlos en conjunto: Si vas a usar los dos, te basta con usar stopImmediatePropagation
.
Vamos a poner un ejemplo para ilustrarlo: tengo un elemento y le asigno 3 controladores de evento click (A, B y C), donde B tiene un stopImmediatePropagation
. Los controladores se ejecutan en el orden en el que se asociaron, por lo que cuando haga click, se ejecutará A, luego B... y nunca se ejecutará C.
$("a").on("click", function(e) {
console.log("EVENTO A");
});
$("a").on("click", function(e) {
console.log("EVENTO B");
e.stopImmediatePropagation();
});
$("a").on("click", function(e) {
console.log("EVENTO C (nunca se ejecutará)");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#">Pulsa sobre este enlace</a>
Ese ejemplo es un poco simple por lo que no se ve la utilidad de stopImmediatePropagation
, pero imagina que tienes un formulario en el que vas a hacer validación, si algo falla puedes hacer stopImmediatePropagation
para que si hay algún otro evento asociado con el formulario, éste no se ejecute.