événement.preventDefault () vs. return false

quand je veux empêcher d'autres gestionnaires d'événements d'exécuter après un certain événement est tiré, je peux utiliser l'une des deux techniques. Je vais utiliser jQuery dans les exemples, mais cela s'applique aussi à 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;
});

y a-t-il une différence significative entre ces deux méthodes pour arrêter la propagation de l'événement?

pour moi, return false; est plus simple, plus court et probablement moins susceptible d'erreur que l'exécution d'une méthode. Avec la méthode, vous devez vous rappeler sur le boîtier correct, la parenthèse, etc.

aussi, je dois définir le premier paramètre dans callback 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 preventDefault à la place? Quelle est la meilleure façon de faire?

2693
demandé sur Taryn 2009-08-31 15:58:31

12 réponses

return false à partir de dans un jQuery gestionnaire d'événement est effectivement la même chose que d'appeler à la fois e.preventDefault et e.stopPropagation sur le passé jQuery.Objet de l'événement.

e.preventDefault() empêchera l'événement par défaut de se produire, e.stopPropagation() empêchera l'événement de bouillonner et return false fera les deux. À noter que ce comportement diffère de celui des normal (non-jQuery) event handlers, dans lequel, notamment, return false ne pas arrêter l'événement de bouillonner.

Source: John Resig

tout avantage à utiliser event.preventDefault () sur "return false" pour annuler un clic href?

2631
répondu karim79 2016-09-09 15:47:47

d'après mon expérience, il y a au moins un avantage évident à utiliser event.preventDefault() sur l'utilisation de return false. Supposons que vous capturez l'événement de clic sur une étiquette d'ancrage, sinon ce serait un gros problème si l'utilisateur devait être navigué loin de la page courante. Si votre gestionnaire de clic utilise return false pour empêcher la navigation dans le navigateur, il ouvre la possibilité que l'interpréteur n'atteigne pas la déclaration de retour et que le navigateur va procéder à l'exécution de l'ancre le comportement par défaut de tag. 

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

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

  return false;
});

L'avantage à l'utilisation de l'événement.preventDefault () est que vous pouvez ajouter ceci comme première ligne dans le handler, garantissant ainsi que le comportement par défaut de l'ancre ne se déclenchera pas, peu importe si la dernière ligne de la fonction n'est pas atteinte (par ex. 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.
});
399
répondu Jeff Poulton 2011-01-22 22:37:09

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

jQuery et le précédemment lié à la citation à partir de John Resig (dans karim79 message ) semblent être la source de l'incompréhension de la façon dont les gestionnaires d'événements dans le travail en général.

fait: un gestionnaire d'événements qui retourne false empêche la action par défaut pour cet événement. Il n'arrête pas la propagation de l'évènement. Les gestionnaires d'événements ont toujours travaillé de cette façon, depuis L'époque de Netscape Navigator.

Le documentation de MDN explique comment return false dans un gestionnaire d'événement œuvres

ce qui se passe à jQuery n'est pas le même que ce qui se passe avec les gestionnaires d'événements. DOM event listeners et MSIE" attached " events sont tout à fait différents.

Pour en savoir plus, voir attachEvent sur MSDN et le W3C DOM 2 Événements de la documentation .

92
répondu Garrett 2017-05-23 12:26:38

généralement, votre première option ( preventDefault() ) est celle à prendre, mais vous devez savoir dans quel contexte vous vous trouvez et quels sont vos objectifs.

Carburant de Votre Codage a une grande article sur return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() .

NOTE: le lien Fuel Your Coding ci-dessus a produit des erreurs 5xx pour très peu de temps. J'ai trouvé une copie de celui-ci dans le Internet Archive , imprimé en PDF, et le mettre dans Dropbox: archivée article sur return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() (PDF) "" 1519190920

"
58
répondu JAAulde 2017-08-02 15:44:32

en utilisant jQuery, return false fait 3 choses distinctes quand vous l'appelez:

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

Voir jQuery Événements: Arrêt (Mis)à l'Aide de Return False pour plus d'informations et d'exemples.

51
répondu James Drinkard 2016-10-03 18:13:14

vous pouvez accrocher beaucoup de fonctions sur l'événement onClick pour un élément. Comment pouvez-vous être sûr que le false sera la dernière à feu? preventDefault d'un autre côté empêchera définitivement seulement le comportement par défaut de l'élément.

39
répondu Eldar Djafarov 2014-03-31 00:36:30

je pense

event.preventDefault()

est la façon spécifiée par le w3c d'annuler des événements.

vous pouvez lire ceci dans la spécification W3C sur 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, alors l'Utilisateur sera redirigé vers une page avec la chaîne false écrite.

17
répondu rahul 2014-03-31 00:39:39

je pense que la meilleure façon de faire ceci est d'utiliser event.preventDefault() parce que si une exception est soulevée dans le handler, alors la déclaration de retour false sera sautée et le comportement sera opposé à ce que vous voulez.

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

si vous voulez toujours aller avec le retour false , alors vous pouvez mettre tout votre code handler dans un essayez le bloc catch comme ci-dessous: 

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
13
répondu Naga Srinu Kapusetti 2018-01-17 15:30:34

mon opinion d'après mon expérience disant, qu'il est toujours mieux d'utiliser 

event.preventDefault()

pratiquement pour arrêter ou empêcher l'événement soumettre, chaque fois que nous avons besoin plutôt que return false event.preventDefault() fonctionne très bien.

0
répondu Dilip0165 2015-08-21 06:10:30

la principale différence entre return false et event.preventDefault() est que votre code au-dessous de return false ne sera pas exécuté et dans event.preventDefault() cas votre code s'exécutera après cette déclaration.

Quand vous écrivez return false il faire les choses suivantes pour vous dans les coulisses. 

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();
0
répondu Abdullah Shoaib 2018-02-09 08:14:22

E. preventDefault ();

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

Instance Ex.:-

empêche l'hyperlien de suivre L'URL, empêche le bouton Soumettre pour soumettre le formulaire. Quand vous avez beaucoup de gestionnaires d'événements et que vous voulez juste empêcher l'événement par défaut d'avoir lieu, & d'avoir lieu de nombreuses fois, pour cela nous avons besoin d'utiliser dans le haut de la fonction.)(

raison: -

la raison d'utiliser e.preventDefault(); est que dans notre code donc quelque chose va mal dans le code, alors il permettra d'exécuter le lien ou la forme pour obtenir soumis ou permettre d'exécuter ou permettre toute action que vous devez faire. le bouton & link ou submit sera soumis et permettra encore 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 à toute l'exécution du processus.

raison: -

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

<!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>
0
répondu Parth Raval 2018-04-27 06:55:06

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 fondamentalement la default, mais en même temps, vous arrêtez la propagation à la bulle vers le haut.

donc on peut simplement dire, "return false "dans jQuery est égal à:

return false is e. preventDefault et E. arrêt de la production

mais n'oubliez pas que tout est à jQuery ou DOM fonctions connexes, lorsque vous l'exécutez sur l'élément, fondamentalement, il empêche tout de cuisson, y compris le comportement par défaut et la propagation de l'événement.

fondamentalement avant de commencer à utiliser return false; , d'abord comprendre ce que e.preventDefault(); et e.stopPropagation(); faire, puis si vous pensez que vous avez besoin des deux en même temps, puis il suffit de l'utiliser.

donc essentiellement ce code ci-dessous: 

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

est égal à ce code: 

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});
0
répondu Alireza 2018-07-18 11:07:57