jquery: event.stopImmediatePropagation() vs return false

Question

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

Answer 1

Oui, ils sont différents.

return false est fondamentalement le même que d'appeler à la fois, event.stopPropagation() et event.preventDefault().

Alors que event.stopImmediatePropagation() est le même que event.stopPropagation(), plus empêcher que d'autres gestionnaires d'événements enregistrés sur le même élément à exécuter. Cela n'empêche donc pas l'action par défaut pour un événement, par exemple suivre 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 "normal" événement JavaScript

event.stopPropagation() et event.preventDefault() travaillent aussi dans des gestionnaires d'événements JavaScript "normal" (dans un navigateur compatible W3C), tandis que event.stopImmediatePropagation() est une extension de jQuery (mise à jour: apparemment, il fait partie du DOM Level 3 Events specification).

Note:return falsene empêcher l'événement de bouillonnement dans gestionnaires d'événements "normaux" (non jQuery) (voir this answer) (mais empêche toujours l'action par défaut).

---

lecture Peut-être vaut:

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

Answer 2

Oui. event.stopImmediatePropagation() ne permet pas d'appeler d'autres gestionnaires pour cet événement, quel que soit l'endroit où ils sont liés. Return false n'arrête que les gestionnaires liés à d'autres éléments (c.-à-d. Pas le même élément que le gestionnaire d'événements traitant l'appel stopImmediatePropagation()) de la réception de l'événement.

Answer 3

Renvoyer false arrêtera le bouillonnement d'événement, mais d'autres événements liés se déclencheront. Cependant, stopImmediatePropagation empêche les autres événements liés de se déclencher et arrête de bouillonner.

Code Exemple de ceci sur jsfiddle.

Answer 4

@FelixKling table réponse ayant grand concept:

Je posterai plus la table a 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

Answer 5

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>

(également disponible sur JSFiddle.)

Le tableau manwal’s answer n'est pas tout à fait correcte.

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