stopPropagation vs. stopImmediatePropagation

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

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>

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

$("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>

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

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>

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.

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.

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.

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.

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

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á.

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.}

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>