web-dev-qa-db-fra.com

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?

javascriptjqueryevents
55
Arjun

Oui, ils sont différents.

return false est fondamentalement la même chose que d'appeler les deux, event.stopPropagation() et event.preventDefault() .

Considérant que event.stopImmediatePropagation() est identique à event.stopPropagation() plus empêchant l’exécution d’autres gestionnaires d’événements enregistrés appartenant au même élément. Donc, cela n'empêche pas l'action par défaut pour un événement, tel que le suivi d'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 des gestionnaires d'événements JavaScript "normaux" (dans un navigateur compatible W3C), alors que event.stopImmediatePropagation() est une extension de jQuery (pdate: apparemment, il fait partie du DOM niveau 3 Spécification d'événements ).

Remarque:return falsene le fait pas empêcher la propagation de l'événement dans les gestionnaires d'événement "normal" (non jQuery) (voir - cette réponse ) (mais empêche toujours l'action par défaut).

Peut-être intéressant de lire:

149
Felix Kling

Renvoyer false arrêtera la propagation de l'événement, mais d'autres événements liés seront déclenchés. Cependant, stopImmediatePropagation empêche le déclenchement d'autres événements liés et arrête la formation de bulles.

Code Exemple de ceci sur jsfiddle .

4
Mark Coleman

Voici la démonstration 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>

(Egalement disponible sur JSFiddle .)

Le tableau dans réponse de manwal n’est pas tout à fait correct.

                            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**
1
kshirish

@FelixKling answer's table ayant un très bon concept:

Je poste une table plus expliquée:

                            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

0
Manwal

Oui. event.stopImmediatePropagation () ne laissera aucun autre gestionnaire pour cet événement être appelé, quel que soit le lieu où ils sont liés. Renvoyer false empêche uniquement les gestionnaires liés à d'autres éléments (c.-à-d. De ne pas avoir le même élément que le gestionnaire d'événements chargé de l'appel stopImmediatePropagation ()) de recevoir l'événement.

0
gailbear