event.preventDefault () vs. return false

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?

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?

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.
});

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 .

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.

Gazole Votre codage a un grand article sur return false;vs event.preventDefault()vs event.stopPropagation()vsevent.stopImmediatePropagation() .

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.

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.

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.

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;
});

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.

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();

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>

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();
});

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