web-dev-qa-db-fra.com

event.preventDefault () vs return false

Lorsque je veux empêcher d'autres gestionnaires d'événements de s'exécuter après le déclenchement d'un certain événement, je peux utiliser l'une des deux techniques suivantes. 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; est plus simple, plus court et probablement moins sujet aux erreurs que l’exécution d’une méthode. Avec la méthode, vous devez vous souvenir du cas correct, de la parenthèse, etc. 

De plus, je dois définir le premier paramètre dans callback pour pouvoir appeler la méthode. Peut-être y at-il des raisons pour lesquelles je devrais éviter de le faire comme ceci et utiliser plutôt preventDefault? Quel est le meilleur moyen?

javascriptjqueryjavascript-eventsevent-handlingevent-propagation
2762
RaYell

return false à partir de dans un gestionnaire d'événements jQuery est effectivement identique à l'appel de e.preventDefault et de e.stopPropagation sur l'objet jQuery.Event transmis.

e.preventDefault() empêchera l’événement par défaut, e.stopPropagation() empêchera la propagation de l’événement et return false fera les deux. Notez que ce comportement diffère des gestionnaires d'événement normaux (non-jQuery), dans lesquels, notamment, return false fait non arrêter l'arrêt de la propagation de l'événement.

Source: John Resig

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

2680
karim79

D'après mon expérience, il y a au moins un avantage évident à utiliser event.preventDefault () par rapport à return false. Supposons que vous capturez l'événement click sur une balise d'ancrage, ce qui poserait un gros problème si l'utilisateur devait quitter la page en cours. Si votre gestionnaire de clics utilise return false pour empêcher la navigation dans le navigateur, il est possible que l'interpréteur n'atteigne pas l'instruction return et le navigateur exécute le 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’utilisation de event.preventDefault () présente l’avantage de pouvoir l’ajouter à la 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 (erreur d’exécution, par exemple). ).

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

  // custom handling here

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

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 (en karim79message ) semblent être la source de malentendus sur la façon dont les gestionnaires d'événements en général travail. 

Fait: Un gestionnaire d'événements renvoyant la valeur false empêche l'action par défaut de cet événement. Cela n'arrête pas la propagation de l'événement. Les gestionnaires d’événements ont toujours fonctionné de la même manière depuis Netscape Navigator.

Le documentation de MDN explique le fonctionnement de return false dans 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 un tout autre problème. 

Pour en savoir plus, voir attachEvent sur MSDN et la documentation sur les événements du DOM 2 du W3C }.

95
Garrett

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

Fuel Your Coding a un excellent article sur return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() .

62
JAAulde

Lorsque vous utilisez jQuery, return false fait 3 choses différentes 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 Evénements jQuery: Stop (Mis) à l'aide de Return False pour plus d'informations et d'exemples.

55
James Drinkard

Vous pouvez accrocher de nombreuses fonctions à l'événement onClick pour un élément. Comment pouvez-vous être sûr que le false sera le dernier à tirer? preventDefault, par contre, empêchera définitivement uniquement le comportement par défaut de l'élément.

40
Eldar Djafarov

Je pense

event.preventDefault()

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

Vous pouvez lire ceci dans les spécifications du W3C sur annulation d'événement .

De plus, vous ne pouvez pas utiliser return false dans toutes les situations. Lorsque vous attribuez une fonction javascript à l'attribut href et que vous renvoyez false, l'utilisateur sera redirigé vers une page contenant une chaîne false.

19
rahul

Je pense que la meilleure façon de procéder consiste à utiliser event.preventDefault() car, si une exception est générée dans le gestionnaire, l'instruction return false sera ignorée et le comportement sera opposé à celui souhaité.

Mais si vous êtes certain que le code ne déclenchera aucune exception, vous pouvez utiliser la méthode de votre choix.

Si vous voulez toujours utiliser la valeur retournée false, vous pouvez alors mettre tout votre code de gestionnaire dans un bloc catch catch, comme ci-dessous:

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

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’événement submit, chaque fois que nous avons demandé plutôt que return false.__ event.preventDefault() fonctionne bien.

1
Dilip0165

La principale différence entre return false et event.preventDefault() est que votre code ci-dessous return false ne sera pas exécuté et que, dans le cas event.preventDefault(), votre code sera exécuté après cette instruction.

Lorsque vous écrivez return false, il effectue les opérations suivantes pour vous dans les coulisses.

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

e.preventDefault ();

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

Instance Ex. :-

empêche le lien hypertexte de suivre l'URL, empêche le bouton d'envoi d'envoyer le formulaire. Quand vous avez plusieurs gestionnaires d’événements et que vous voulez juste empêcher l’événement par défaut, et plusieurs fois, .__, pour cela, nous devons utiliser en haut de la fonction (). 

Raison:-

La raison d'utiliser e.preventDefault(); est que dans notre code, si quelque chose ne va pas, cela permettra d'exécuter le lien ou le formulaire pour le soumettre ou d'autoriser l'exécution ou l'autorisation de toute action que vous devez faire. Le bouton & link ou submit 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>

retourne Faux;

Cela 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 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
Parth Raval

Fondamentalement, vous combinez les éléments car jQuery est un framework qui se concentre principalement sur les éléments HTML, ce qui empêche fondamentalement les éléments par défaut, mais en même temps, vous empêchez la propagation de se propager.

Nous pouvons donc simplement dire que return false dans jQuery est égal à:

return false est e.preventDefault AND e.stopPropagation

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

Avant de commencer à utiliser return false;, comprenez d’abord ce que font e.preventDefault(); et e.stopPropagation();, puis si vous pensez avoir besoin des deux en même temps, utilisez-le simplement.

Donc, fondamentalement, ce code ci-dessous:

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

est égal à ce code:

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

D'après mon expérience, event.stopPropagation () est principalement utilisé dans les effets ou les animations CSS, par exemple lorsque l'effet de survol est activé pour la carte et l'élément de bouton, lorsque vous passez la souris sur le bouton, les effets de survol de la carte et des boutons sont déclenchés. , vous pouvez utiliser event.stopPropagation () pour arrêter les actions bouillonnantes 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 click pour l'action submit; si l'utilisateur soumet le formulaire en appuyant sur entrée, le navigateur déclenché par l'événement de frappe au clavier, et non votre événement click ici, vous devez utiliser event.preventDefault () pour éviter comportement. Je ne sais pas ce que l'enfer est rendu faux; Désolé.Pour plus de précisions, visitez ce lien et jouez avec la ligne 33 https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

0
Sathish Shajahan