jquery: event.stopImmediatePropagation() vs return false

Question

¿Hay alguna diferencia entre llamar a event.stopImmediatePropagation() y return false dentro de un controlador de eventos?

Answer 1

Sí, son diferentes.

return false es básicamente lo mismo que llamar a ambos, event.stopPropagation() y event.preventDefault().

Mientras event.stopImmediatePropagation() es lo mismo que event.stopPropagation()más prevención de otros controladores de eventos registrados en el mismo elemento a ser ejecutado. Por lo tanto, no evita la acción predeterminada para un evento, como seguir un enlace hecho clic.

En resumen:

      stop | prevent  | prevent "same element" 
          bubbling | default action | event handlers 

return false     Yes   Yes    No 
preventDefault    No   Yes    No 
stopPropagation    Yes   No    No 
stopImmediatePropagation  Yes   No    Yes 

return false funciona también en "normal" JavaScript caso manipuladores

event.stopPropagation() y event.preventDefault() trabaja también en "normal" de JavaScript controladores de eventos (en un navegador compatible W3C), mientras que event.stopImmediatePropagation() es una extensión de jQuery (actualización: aparentemente es parte de DOM Level 3 Events specification).

Nota:return falseno evitar que el evento burbujeando en controladores de eventos "normales" (no jQuery) (ver this answer) (pero aún impide la acción por defecto).

---

Tal vez vale la pena leer:

• jQuery Events: Stop (Mis)Using Return False
• quirksmode.org - Event order

Answer 2

Sí. event.stopImmediatePropagation() no permitirá llamar a ningún otro controlador para ese evento, independientemente de dónde estén enlazados. Devolver falso solo detiene los manejadores vinculados a otros elementos (es decir, no el mismo elemento que el manejador de eventos que trata con la llamada stopImmediatePropagation()) de recibir el evento.

Answer 3

Al volver false se detendrá el burbujeo del evento, pero se desencadenarán otros eventos vinculados. Sin embargo, stopImmediatePropagation impide que otros eventos vinculados se activen y deja de burbujear.

Código Ejemplo de esto en jsfiddle.mesa de tener gran concepto

Answer 4

@FelixKling de respuesta:

estoy publicando más explicó tabla:

      stop | prevent  |  prevent   | 
          bubbling | default action | event handlers  | 
                Same Element | Parent Element 

return false     Yes   Yes    No   No 
preventDefault    No   Yes    No   No 
stopPropagation    Yes   No    No   Yes 
stopImmediatePropagation  Yes   No    Yes   No 

Referencia: https://stackoverflow.com/a/5302939/2236219

Answer 5

Aquí está la demostración completa para return false, preventDefault, stopPropagation y stopImmediatePropagation:

var kid = document.getElementsByTagName('button')[0]; 
 
var dad = document.getElementsByTagName('div')[0]; 
 

 
kid.addEventListener('click', function(e) { 
 
    console.log('kid here'); 
 
    e.stopImmediatePropagation(); 
 
}); 
 

 
kid.addEventListener('click', function(e) { 
 
    console.log('neighbour kid here'); 
 
}); 
 

 
dad.addEventListener('click', function(e) { 
 
    console.log('dad here'); 
 
}); 
 

 
dad.addEventListener('click', function(e) { 
 
    console.log('neighbour dad here'); 
 
});

<div> 
 
    <button>press</button> 
 
</div>

(también disponible en JSFiddle.)

La tabla de la manwal’s answer no es totalmente correcto.

      stop | prevent  |  prevent 
          bubbling | default action | event handlers 
            |    | Same Element | Parent Element 

return false     Yes   Yes    No   No 
preventDefault    No   Yes    No   No 
stopPropagation    Yes   No    No   Yes 
stopImmediatePropagation  Yes   No    Yes   **Yes**