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:
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