stopPropagation evitará que se ejecuten los controladores principales stopImmediatePropagation evitará que se ejecuten los controladores principales y también cualquier otro controlador

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>

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

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

¿Qué fase?

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

Y esto es en 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, y también se los salta en el mismo elemento
• cita: "event.stopPropagation() [...] se usa para detener las ejecuciones de su controlador principal correspondiente solamente"
  • corrección: si la propagación se detiene en la fase de captura, los controladores de los niños, incluido el objetivo , tampoco se llaman, no solo los padres
  • ...y: si la propagación se detiene en la fase de burbuja, ya se ha llamado a todos los controladores de la fase de captura, incluidos los de los padres

_{Una explicación de la fase de eventos de fiddle y mozilla.org con demostración.}

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, debería haber cuatro alertas: tres en el div secundario y una en el div principal.

Si evitamos que el evento se propague, habrá 3 alertas (todas en el div del niño interno). Dado que el evento no se propagará hacia arriba en la jerarquía DOM, el div principal no lo verá y su controlador no se activará.

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