stopPropagation vs. stopImmediatePropagation

314

¿Cuál es la diferencia entre event.stopPropagation()y event.stopImmediatePropagation()?

javascript jquery

— Arjun
fuente

321

stopPropagationevitará que los padres manipuladores de ser ejecutado stopImmediatePropagationimpedirá cualquier controlador de padres y también los otros manipuladores de ejecución

Ejemplo rápido de la documentación de jquery:

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

$("p").click(function(event) {
  // This function won't be executed
  $(this).css("background-color", "#f00");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

Expandir fragmento

Tenga en cuenta que el orden del enlace del evento es importante aquí.

Mostrar fragmento de código

$("p").click(function(event) {
  // This function will now trigger
  $(this).css("background-color", "#f00");
});

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

Expandir fragmento

— Dave
fuente

1

Usted enfatiza "padre", pero en realidad ambos también dejan de ingresar a los niños si se les llama en la fase de captura. Vea mi respuesta para más detalles.

— Robert Siemer

57

Un pequeño ejemplo para demostrar cómo funcionan estos dos paros de propagación.

Mostrar fragmento de código

var state = {
  stopPropagation: false,
  stopImmediatePropagation: false
};

function handlePropagation(event) {
  if (state.stopPropagation) {
    event.stopPropagation();
  }

  if (state.stopImmediatePropagation) {
    event.stopImmediatePropagation();
  }
}

$("#child").click(function(e) {
  handlePropagation(e);
  console.log("First event handler on #child");
});


$("#child").click(function(e) {
  handlePropagation(e);
  console.log("Second event handler on #child");
});

// First this event will fire on the child element, then propogate up and
// fire for the parent element.
$("div").click(function(e) {
  handlePropagation(e);
  console.log("Event handler on div: #" + this.id);
});


// Enable/disable propogation
$("button").click(function() {
  var objectId = this.id;
  $(this).toggleClass('active');
  state[objectId] = $(this).hasClass('active');
  console.log('---------------------');
});

div {
  padding: 1em;
}

#parent {
  background-color: #CCC;
}

#child {
  background-color: #000;
  padding: 5em;
}

button {
  padding: 1em;
  font-size: 1em;
}

.active {
  background-color: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">&nbsp;</div>
</div>

<button id="stopPropagation">Stop Propogation</button>
<button id="stopImmediatePropagation" ">Stop Immediate Propogation</button>

Expandir fragmento

Hay tres controladores de eventos vinculados. Si no detenemos ninguna propagación, entonces debería haber cuatro alertas: tres en el div secundario y una en el div primario.

Si detenemos la propagación del evento, habrá 3 alertas (todas en el div secundario interno). Como el evento no se propagará por la jerarquía DOM, el div padre no lo verá y su controlador no se activará.

Si detenemos la propagación de inmediato, solo habrá 1 alerta. Aunque hay tres controladores de eventos conectados al div secundario interno, solo se ejecuta 1 y cualquier otra propagación se elimina inmediatamente, incluso dentro del mismo elemento.

— Anurag
fuente

Ambas stopPropagation()variantes también dejarán de propagarse por la jerarquía DOM. No solo arriba. Por favor revise mi respuesta para más detalles con la fase de captura.

— Robert Siemer

26

Desde la API jQuery :

Además de evitar que se ejecuten controladores adicionales en un elemento, este método también detiene el burbujeo al llamar implícitamente event.stopPropagation (). Para evitar que el evento se propague a los elementos ancestrales y permitir que otros controladores de eventos se ejecuten en el mismo elemento, podemos usar event.stopPropagation () en su lugar.

Use event.isImmediatePropagationStopped () para saber si alguna vez se llamó a este método (en ese objeto de evento).

En resumen: event.stopPropagation()permite que se ejecuten otros controladores en el mismo elemento, mientras que event.stopImmediatePropagation()evita que se ejecute cada evento.

— Aron Rotteveel
fuente

Solo para estar seguro, la versión javascript nativa de event.stopImmediatePropagationno deja de burbujear, ¿verdad?

— Alexander Derck

Lo hace, el burbujeo es cuando el evento se propaga a los elementos principales, stopImmediatePropagationdetiene el período de propagación del evento, ambos deben evitar el burbujeo, no vale la pena que también pueda cambiar el modo para capturar lo que activará primero los elementos más externos y solo entonces baja a los niños (el burbujeo es el valor predeterminado y funciona en la dirección opuesta)

— JonnySerra

1

No es exacto, por decir lo menos. Detenerse en la fase de captura no permitirá que se ejecuten controladores de burbujas en el mismo elemento como se explica en mi respuesta.

— Robert Siemer

23

event.stopPropagationevitará que se ejecuten controladores en elementos primarios.
Las llamadas event.stopImmediatePropagationtambién evitarán que se ejecuten otros controladores en el mismo elemento.

— SLaks
fuente

21

Vale la pena mencionar que los controladores de eventos se ejecutan en el orden en que se han adjuntado al elemento.

— Felix Kling

19

Llego tarde, pero tal vez pueda decir esto con un ejemplo específico:

Di, si tienes un <table>, con <tr>, y luego <td>. Ahora, supongamos que configura 3 controladores de eventos para el <td>elemento, luego, si lo hace event.stopPropagation()en el primer controlador de eventos que configuró <td>, todos los controladores de eventos <td>seguirán ejecutándose , pero el evento simplemente no se propagará a <tr>o<table> (y no subir y subir a <body>, <html>, document, y window).

Ahora, sin embargo, si usa event.stopImmediatePropagation()su primer controlador de eventos, entonces, los otros dos controladores de eventos para <td>NO se ejecutarán , y no se propagarán hasta <tr>, <table>(y no subirán y subirán hasta<body> , <html>, document, y window).

Tenga en cuenta que no es solo para <td>. Para otros elementos, seguirá el mismo principio.

— nonopolaridad
fuente

10

1)event.stopPropagation(): => Se utiliza para detener las ejecuciones de su controlador principal correspondiente únicamente.

2) event.stopImmediatePropagation(): => Se utiliza para detener la ejecución de su controlador principal correspondiente y también el controlador o la función adjunta a sí mismo, excepto el controlador actual. => También detiene todo el controlador adjunto al elemento actual de DOM completo.

Aquí está el ejemplo: Jsfiddle !

Gracias -Sahil

— Sahil Kashetwar
fuente

3

event.stopPropagation () permite que se ejecuten otros controladores en el mismo elemento, mientras que event.stopImmediatePropagation () evita que se ejecute cada evento. Por ejemplo, vea a continuación el bloque de código jQuery.

$("p").click(function(event)
{ event.stopImmediatePropagation();
});
$("p").click(function(event)
{ // This function won't be executed 
$(this).css("color", "#fff7e3");
});

Si se usó event.stopPropagation en el ejemplo anterior, se disparará el siguiente evento click en el elemento p que cambia el css, pero en caso event.stopImmediatePropagation () , el siguiente evento p click no se disparará.

— Rahul Kumar
fuente

2

Sorprendentemente, ¡ todas las demás respuestas solo dicen la mitad de la verdad o están realmente equivocadas!

e.stopImmediatePropagation() evita que se llame a otro controlador para este evento, sin excepciones
e.stopPropagation()es similar, pero aún llama a todos los controladores para esta fase en este elemento si no se ha llamado ya

Que fase

Por ejemplo, un evento de clic siempre irá primero al DOM (llamado "fase de captura"), finalmente alcanzará el origen del evento ("fase de destino") y luego volverá a aparecer ("fase de burbuja"). Y con addEventListener()usted puede registrar múltiples controladores tanto para la captura como para la fase de burbuja de forma independiente. (La fase de destino llama a los manejadores de ambos tipos en el objetivo sin distinguir).

Y esto es sobre lo que las otras respuestas son incorrectas:

cita: "event.stopPropagation () permite que se ejecuten otros controladores en el mismo elemento"
corrección: si se detiene en la fase de captura, nunca se alcanzarán los controladores de la fase de burbuja, también se omiten en el mismo elemento
cita: "event.stopPropagation () [...] se utiliza para detener las ejecuciones de su controlador principal correspondiente únicamente"
corrección: si se detiene en la fase de captura, los controladores de cualquier niño, incluido el objetivo , tampoco se llaman, no solo los padres

_{Una explicación de la fase del evento fiddle y mozilla.org con demo.}

— Robert Siemer
fuente

1

Aquí estoy agregando mi ejemplo JSfiddle para stopPropagation vs stopImmediatePropagation. JSFIDDLE

let stopProp = document.getElementById('stopPropagation');
let stopImmediate = document.getElementById('stopImmediatebtn');
let defaultbtn = document.getElementById("defalut-btn");


stopProp.addEventListener("click", function(event){
	event.stopPropagation();
  console.log('stopPropagation..')
  
})
stopProp.addEventListener("click", function(event){
  console.log('AnotherClick')
  
})
stopImmediate.addEventListener("click", function(event){
		event.stopImmediatePropagation();
    console.log('stopimmediate')
})

stopImmediate.addEventListener("click", function(event){
    console.log('ImmediateStop Another event wont work')
})

defaultbtn.addEventListener("click", function(event){
    alert("Default Clik");
})
defaultbtn.addEventListener("click", function(event){
    console.log("Second event defined will also work same time...")
})

div{
  margin: 10px;
}

<p>
The simple example for event.stopPropagation and stopImmediatePropagation?
Please open console to view the results and click both button.
</p>
<div >
<button id="stopPropagation">
stopPropagation-Button
</button>
</div>
<div  id="grand-div">
  <div class="new" id="parent-div">
    <button id="stopImmediatebtn">
    StopImmediate
    </button>
  </div>
</div>
<div>
<button id="defalut-btn">
Normat Button
</button>
</div>

Expandir fragmento

— Abhilash
fuente