event.preventDefault () vs. return false


2961

Lorsque je souhaite empêcher l'exécution d'autres gestionnaires d'événements après le déclenchement d'un certain événement, je peux utiliser l'une des deux techniques. J'utiliserai jQuery dans les exemples, mais cela s'applique également à plain-JS:

1. event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false

$('a').click(function () {
    // custom handling here
    return false;
});

Existe-t-il une différence significative entre ces deux méthodes d'arrêt de la propagation des événements?

Pour moi, return false;c'est plus simple, plus court et probablement moins sujet aux erreurs que d'exécuter une méthode. Avec la méthode, vous devez vous rappeler du boîtier, des parenthèses, etc.

De plus, je dois définir le premier paramètre en rappel pour pouvoir appeler la méthode. Peut-être, il y a des raisons pour lesquelles je devrais éviter de le faire comme ça et utiliser à la preventDefaultplace? Quelle est la meilleure façon?


172
Notez que jQuery preventDefaultn'empêche pas les autres gestionnaires de s'exécuter. C'est pour ça stopImmediatePropagation.
Crescent Fresh

19
@CrescentFresh, il empêche d'autres gestionnaires (liés par la suite) d'exécuter ... sur le nœud DOM sur lequel l'événement est déclenché. Cela n'empêche tout simplement pas la propagation.
paupières

37
Ce ne sont pas "deux méthodes pour arrêter la propagation des événements?" e.preventDefault (); empêche l'action par défaut, il n'arrête pas la propagation des événements, ce qui est fait par e.stopPropagation ().
Timo Tijhof

24
Cette question et ses réponses concernent jQuery. Si vous êtes venu ici à la recherche d'une réponse JavaScript simple, consultez event.preventDefault () vs return false (no jQuery)
Oriol

5
Cette réponse a un tableau expliquant tout cela stackoverflow.com/a/5302939/759452
Adrien Be

Réponses:


2818

return falseà partir d' un gestionnaire d'événements jQuery équivaut en fait à appeler les deux e.preventDefaultet e.stopPropagationsur l' objet jQuery.Event passé .

e.preventDefault()empêchera l'événement par défaut de se produire, e.stopPropagation()empêchera l'événement de se propager et return falsefera les deux. Notez que ce comportement diffère des gestionnaires d'événements normaux (non jQuery), dans lesquels, notamment, return falsen'empêche pas l'événement de se propager.

Source: John Resig

Un avantage à utiliser event.preventDefault () par rapport à "return false" pour annuler un clic href?


126
return falseà partir d'un gestionnaire DOM2 ( addEventListener) ne fait rien du tout (ni n'empêche la valeur par défaut ni arrête de bouillonner; à partir d'un gestionnaire Microsoft DOM2-ish ( attachEvent), il empêche la valeur par défaut mais pas à bouillonner; à partir d'un gestionnaire DOM0 ( onclick="return ..."), il empêche la valeur par défaut (fourni vous incluez le returndans l'attribut) mais ne bouillonne pas; à partir d'un gestionnaire d'événements jQuery, il fait les deux, car c'est une chose jQuery. Détails et tests en direct ici
TJ Crowder

12
Il serait utile de définir ici "Propagation" et "Par défaut". Pour ma part, je continue à les confondre. Est-ce correct? Propagation = mon code (gestionnaires d'événements JavaScript pour les éléments parents). Par défaut = code du navigateur (liens, sélection de texte, etc.)
Bob Stein

5
que signifie vraiment bouillonner? exemple?
Govinda Sakhare

5
+1 pour noter que cela return falsen'arrête pas la propagation des événements dans les gestionnaires d'événements non jQuery. c'est à dire <a href="#" onclick="return false">Test</a>n'empêche pas l'événement de bouillonner.
Doug S

424

D'après mon expérience, il y a au moins un avantage évident lors de l'utilisation de event.preventDefault () par rapport à l'utilisation de return false. Supposons que vous capturez l'événement de clic sur une balise d'ancrage, sinon ce serait un gros problème si l'utilisateur devait être éloigné de la page actuelle. Si votre gestionnaire de clics utilise return false pour empêcher la navigation dans le navigateur, cela ouvre la possibilité que l'interpréteur n'atteigne pas l'instruction return et que le navigateur procède à l'exécution du comportement par défaut de la balise d'ancrage.

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

L'avantage de l'utilisation de event.preventDefault () est que vous pouvez l'ajouter comme première ligne du gestionnaire, garantissant ainsi que le comportement par défaut de l'ancre ne se déclenchera pas, que la dernière ligne de la fonction ne soit pas atteinte (par exemple, erreur d'exécution). ).

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

68
Bien que cela soit vrai, le comportement opposé est souvent préférable lors de l'amélioration progressive (ce qui, je pense, est probablement la raison la plus probable pour remplacer une action par défaut)
meandmycode

Les deux sont des moyens de bloquer le comportement par défaut d'un événement, c'est juste une question de problème que vous essayez de résoudre.
Ferkze

102

Ce n'est pas, comme vous l'avez intitulé, une question "JavaScript"; c'est une question concernant la conception de jQuery.

jQuery et la citation précédemment liée de John Resig (dans le message de karim79 ) semblent être la source d'un malentendu sur le fonctionnement des gestionnaires d'événements en général.

Réalité: un gestionnaire d'événements qui renvoie false empêche l'action par défaut pour cet événement. Cela n'arrête pas la propagation de l'événement. Les gestionnaires d'événements ont toujours fonctionné de cette façon, depuis les temps anciens de Netscape Navigator.

La documentation de MDN explique le fonctionnement return falsed'un gestionnaire d'événements

Ce qui se passe dans jQuery n'est pas le même que ce qui se passe avec les gestionnaires d'événements. Les écouteurs d'événements DOM et les événements "attachés" MSIE sont une tout autre affaire.

Pour plus d'informations, consultez attachEvent sur MSDN et la documentation des événements W3C DOM 2 .


6
@rds Cela dit "preventDefault n'arrête pas la propagation de l'événement via le DOM. event.stopPropagation devrait être utilisé pour cela."
Garrett

Une réponse à une question étroitement liée allègue qu'avant HTML 5, le renvoi de faux d'un gestionnaire d'événements n'était pas censé faire quoi que ce soit. Maintenant, c'est peut-être une interprétation incorrecte de la spécification (difficile à comprendre), ou peut-être même si elle n'est pas spécifiée littéralement, tous les navigateurs ont interprété return falsela même chose que event.preventDefault(). Mais je ne sais pas; c'est assez pour me faire prendre ça avec une pincée de sel.
Mark Amery

9
Je déteste la façon dont chaque résultat de recherche javascript dans google concerne réellement jQuery, +1
Alexander Derck

Il l'a marqué comme JavaScript et jQuery, et les deux sont corrects. jQueryest simplement un sous-ensemble de JavaScript, pas son propre langage.
ProfK


57

Lorsque vous utilisez jQuery, return falsefaites 3 choses distinctes lorsque vous l'appelez:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. Arrête l'exécution du rappel et retourne immédiatement lorsqu'il est appelé.

Voir Événements jQuery: Stop (Mis) Using Return False pour plus d'informations et d'exemples.


Si d'autres parties du code écoutent cet événement, event.stopPropagation (); annulera leur rappel?
Ferkze

41

Vous pouvez suspendre de nombreuses fonctions sur l' onClickévénement pour un élément. Comment pouvez-vous être sûr que falsecelui-ci sera le dernier à tirer? preventDefaultd'autre part, n'empêchera certainement que le comportement par défaut de l'élément.


20

je pense

event.preventDefault()

est le moyen spécifié par le w3c pour annuler des événements.

Vous pouvez le lire dans la spécification W3C sur l' annulation d'événement .

Vous ne pouvez pas non plus utiliser return false dans toutes les situations. Lorsque vous donnez une fonction javascript dans l'attribut href et si vous retournez false, l'utilisateur sera redirigé vers une page avec une fausse chaîne écrite.


4
Pas dans un navigateur que j'ai jamais rencontré. Peut-être confondez-vous cela <a href="javascript:return false"ou quelque chose?
mplungjan

10
-1; l'affirmation qu'un href qui renvoie false générera une page de texte avec le mot "false" écrit dessus est un non-sens complet.
Mark Amery

1
(moins) 1; lien brisé + non
Phil

15

Je pense que la meilleure façon de le faire est d'utiliser event.preventDefault()car si une exception est levée dans le gestionnaire, alors l' falseinstruction de retour sera ignorée et le comportement sera opposé à ce que vous voulez.

Mais si vous êtes sûr que le code ne déclenchera aucune exception, vous pouvez utiliser la méthode que vous souhaitez.

Si vous voulez toujours aller avec le retour false, vous pouvez mettre tout votre code de gestionnaire dans un bloc try catch comme ci-dessous:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

1

Mon opinion d'après mon expérience en disant qu'il est toujours préférable d'utiliser

event.preventDefault() 

Pratiquement pour arrêter ou empêcher l'envoi d'un événement, chaque fois que nous en avons besoin plutôt que de return false event.preventDefault()bien fonctionner.


11
Mieux pourquoi? Vous n'avez littéralement donné aucune justification ici. -1.
Mark Amery

Dans le cas où il existe plusieurs liaisons d'événements, e.preventDefault () est plus ciblé que return false.
Taiger

preventDefaultest quelques mots anglais je le comprends "empêche le défaut". return falseest quelques mots anglais je le comprends "renvoie faux" mais je n'ai aucune idée pourquoi jusqu'à ce que je Google ce code cryptique. Et en prime, je peux contrôler séparément stopPropagationet preventDefault .
Joan

1

La principale différence entre return falseet event.preventDefault()est que votre code ci return false- dessous ne sera pas exécuté etevent.preventDefault() cas où votre code s'exécuterait après cette instruction.

Lorsque vous écrivez return false, faites les choses suivantes pour vous en arrière-plan.

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();

1

e.preventDefault ();

Il arrête simplement l'action par défaut d'un élément.

Exemple d'instance :-

empêche l'hyperlien de suivre l'URL, empêche le bouton d'envoi de soumettre le formulaire. Lorsque vous avez de nombreux gestionnaires d'événements et que vous souhaitez simplement empêcher l'événement par défaut de se produire, et se produire de nombreuses fois, pour cela, nous devons utiliser en haut de la fonction ().

Raison:-

La raison de l'utilisation e.preventDefault();est que dans notre code, il y a donc quelque chose qui ne va pas dans le code, alors cela permettra d'exécuter le lien ou le formulaire à soumettre ou d'autoriser l'exécution ou d'autoriser toute action que vous devez faire. & le lien ou le bouton de soumission sera soumis et permettra toujours la propagation de l'événement.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

return False;

Il arrête simplement l'exécution de la fonction ().

" return false;" mettra fin à l'exécution du processus.

Raison:-

La raison d'utiliser return false; c'est que vous ne voulez plus exécuter la fonction en mode strict.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>


1

Fondamentalement, de cette façon, vous combinez les choses parce que jQuery est un cadre qui se concentre principalement sur les éléments HTML, vous empêchant essentiellement la valeur par défaut, mais en même temps, vous arrêtez la propagation pour faire bouillonner.

On peut donc simplement dire, retourner false in jQueryest égal à:

return false est e.preventDefault ET e.stopPropagation

Mais n'oubliez pas que tout est dans les fonctions liées à jQuery ou DOM, lorsque vous l'exécutez sur l'élément, fondamentalement, cela empêche tout de se déclencher, y compris le comportement par défaut et la propagation de l'événement.

Fondamentalement, avant de commencer à utiliser return false;, d'abord comprendre quoi e.preventDefault();ete.stopPropagation(); faire, alors si vous pensez que vous avez besoin des deux en même temps, puis utilisez simplement.

Donc, fondamentalement, ce code ci-dessous:

$('div').click(function () {
  return false;
});

est égal à ce code:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});

1

D'après mon expérience, event.stopPropagation () est principalement utilisé dans les effets CSS ou les travaux d'animation, par exemple lorsque vous avez un effet de survol pour la carte et l'élément de bouton, lorsque vous survolez le bouton, l'effet de survol de la carte et des boutons sera déclenché dans ce cas. , vous pouvez utiliser event.stopPropagation () pour arrêter les actions de propagation, et event.preventDefault () sert à empêcher le comportement par défaut des actions du navigateur. Par exemple, vous avez un formulaire, mais vous avez uniquement défini l'événement de clic pour l'action de soumission, si l'utilisateur soumet le formulaire en appuyant sur Entrée, le navigateur déclenché par l'événement Keypress, et non votre événement de clic ici, vous devez utiliser event.preventDefault () pour éviter une utilisation inappropriée. comportement. Je ne sais pas ce que l'enfer est de retourner faux; désolé.Pour plus de précisions, visitez ce lien et jouez avec la ligne # 33https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.