Jquery: event.stopImmediatePropagation () vs return false

Existe-t-il une différence entre appeler event.stopImmediatePropagation() et return false dans un gestionnaire d'événements?

Oui, ils sont différents.

return false est fondamentalement identique à appeler les deux, event.stopPropagation() et event.preventDefault() .

Alors que event.stopImmediatePropagation() est identique à event.stopPropagation() plus en empêchant d'autres gestionnaires d'événements enregistrés sur le même élément à exécuter. Donc, cela n'empêche pas l'action par défaut pour un événement, comme en suivant un lien cliqué.

En bref:

  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 fonctionne également dans les gestionnaires d'événements JavaScript "normaux"

event.stopPropagation() et event.preventDefault() fonctionnent également dans les gestionnaires d'événements JavaScript "normaux" (dans un navigateur compatible W3C), tandis que event.stopImmediatePropagation() est une extension de jQuery ( mise à jour: apparemment fait partie du niveau DOM 3 spécifications d'événements ).

Remarque: le return false n'empêche pas l'événement de faire bouillonnant dans les gestionnaires d'événements «normaux» (non-jQuery) (voir cette réponse ) (mais empêche toujours l'action par défaut).


Peut-être la peine de lire:

  • JQuery Events: Stop (Mis) à l'aide de Return False
  • Quirksmode.org – Ordre des événements

Le retour de false arrête l'éboulement des événements, mais d'autres événements liés au feu vont déclencher. Cependant, stopImmediatePropagation empêche les autres événements liés de tirer et arrête de bouillonner.

Exemple de code sur jsfiddle .

Voici la démo complète pour return false , preventDefault , stopPropagation et 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> 

Oui. Event.stopImmediatePropagation () ne permettront à aucun autre gestionnaire pour cet événement, quel que soit l'endroit où ils sont liés. Retour false ne supprime que les gestionnaires liés à d'autres éléments (c'est-à-dire pas le même élément que le gestionnaire d'événements traitant de l'appel stopImmediatePropagation ()) de la réception de l'événement.

La table de réponse @FelixKling a un excellent concept:

Je publie un tableau plus expliqué:

  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 

Référence: https://stackoverflow.com/a/5302939/2236219