de l'événement.preventDefault() vs return false

Lorsque je veux éviter d'autres gestionnaires d'événements de l'exécution après un certain événement est déclenché, je peux utiliser l'une des deux techniques. Je vais utiliser jQuery dans les exemples, mais cela s'applique à la plaine-JS ainsi:

1. event.preventDefault()

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

2. return false

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

Est-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 enclins à faire des erreurs que l'exécution d'une méthode. Avec la méthode, vous devez vous rappeler de corriger les caissons, les parenthèses, etc.

Aussi, je dois définir le premier paramètre de rappel pour être en mesure d'appeler la méthode. Peut-être, il y a quelques raisons pourquoi je devrais éviter de faire comme ceci et l'utilisation preventDefault à la place? Quelle est la meilleure façon de faire?

  • Notez que jQuery preventDefault n'empêche pas les autres gauchers de l'exécution. C'est ce que stopImmediatePropagation est pour.
  • elle empêche les autres (par la suite) pour les gestionnaires de l'exécution de... sur le nœud DOM l'événement est déclenché sur. Il n'a tout simplement pas éviter la propagation.
  • Ce ne sont pas des "deux méthodes pour arrêter la propagation de l'évènement?" e.preventDefault(); empêche l'action par défaut, il n'arrête pas la propagation de l'évènement, qui est fait par l'e.stopPropagation().
  • Cette question et ses réponses sont sur jQuery. Si vous êtes venu ici à la recherche pour un simple javascript réponse, voir event.preventDefault() vs return false (pas de jQuery)
  • jQuery est utilisé dans la question uniquement à simplifier les exemples de code. Si vous réécrivez les sélecteurs jQuery à la plaine-code JS, vous vous retrouverez avec le même problème et c'est la raison qui rend votre question, un double.
  • Cette réponse a un tableau expliquant tout stackoverflow.com/a/5302939/759452
  • Cela ne s'applique pas à la plaine de JS. Tas de bs.
  • vous devez prendre en compte differentation vanille entre js et jquery

InformationsquelleAutor RaYell | 2009-08-31
  1. 2739

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

    e.preventDefault() permettra d'éviter que l'événement par défaut de produit, e.stopPropagation() permettra d'éviter les cas de remontée des et return false fera les deux. Notez que ce comportement diffère de normal (non-jQuery) les gestionnaires d'événements, dans laquelle, notamment, return false ne pas arrêter l'épreuve en cours de remontée.

    Source: John Resig

    Aucun avantage à l'utilisation de l'événement.preventDefault() sur "return false" pour annuler un href clic?

    • return false à partir d'un DOM2 gestionnaire (addEventListener) ne fait rien du tout (ni empêche la valeur par défaut et n'arrêtent pas de bouillonnement; à partir d'un Microsoft DOM2-ish gestionnaire (attachEvent), elle empêche la valeur par défaut, mais pas de bouillonnement; à partir d'un DOM0 gestionnaire (onclick="return ..."), elle empêche la valeur par défaut (à condition que vous comprennent le return dans l'attribut), mais pas de bouillonnement; de jQuery gestionnaire d'événements, il ne la fois, parce que c'est un jQuery chose. Détails et de vivre des tests ici
    • Il serait utile de définir la "Propagation", et "par Défaut" ici. J'ai garder de les confondre. Est-ce correct? Propagation = mon code (JavaScript, des gestionnaires d'événements pour les éléments de parent). par Défaut = code navigateur (liens, la sélection de texte, etc.)
    • qu'est-ce que signifie vraiment par bouillonner? exemple?
    • +1 pour noter qu' return false n' pas arrêter la propagation de l'évènement dans la non-jQuery gestionnaires d'événements. c'est à dire <a href="#" onclick="return false">Test</a> n' pas arrêter l'épreuve en cours de remontée.
    InformationsquelleAutor karim79
  2. 412

    De mon expérience, il y a au moins un avantage évident lors de l'utilisation de l'événement.preventDefault() sur l'utilisation de return false. Supposons que vous êtes à la capture de l'événement cliquez sur une balise d'ancrage, sinon ce qui serait un gros problème si l'utilisateur pour naviguer loin de la page en cours. Si votre gestionnaire de clic utilise return false pour empêcher le navigateur de navigation, cela ouvre la possibilité que l'interprète ne sera pas à l'instruction de retour et le navigateur va procéder à l'exécution de la balise d'ancrage du comportement par défaut.

    $('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 (), c'est que vous pouvez ajouter ce que la première ligne dans le gestionnaire, ce qui permet de garantir que le point d'ancrage du comportement par défaut ne sera pas le feu, peu importe si la dernière ligne de la fonction n'est pas atteint (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.
});
    • Tandis que le vrai, le contraire de comportement est souvent préférable quand on fait de l'amélioration progressive, (je pense que c'est probablement la raison la plus probable pour écraser une action par défaut)
    InformationsquelleAutor Jeff Poulton
  3. 96

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

    jQuery et le auparavant lié citation de John Resig (en karim79 de l' 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énement qui renvoie la valeur false empêche l'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 les jours anciens de Netscape Navigator.

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

    Ce qui se passe dans jQuery n'est pas la même chose que ce qui se passe avec les gestionnaires d'événements. DOM et des écouteurs d'événement MSIE "attaché" les événements sont une question tout à fait différente.

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

    • Ce sujet developer.mozilla.org/en/DOM/event.preventDefault ?
    • Qui dit "preventDefault ne pas arrêter la propagation de l'événement à travers les DOM. de l'événement.stopPropagation doit être utilisé pour cela."
    • Un répondre sur un étroitement liés à la question allègue qu'avant HTML 5, retour faux à partir d'un gestionnaire d'événement n'était pas specced que faire quoi que ce soit. Maintenant, c'est peut-être une interprétation erronée de la (difficile à comprendre) spec, ou peut-être malgré elle de ne pas être specced littéralement tous les navigateurs interprété return false le même que event.preventDefault(). Mais je ne sais pas; c'est assez pour me faire prendre cela avec une pincée de sel.
    • Je déteste la façon dont chaque javascript résultat de recherche de google est en fait à propos de jQuery, +1
    InformationsquelleAutor Garrett
  4. 64

    Généralement, votre première option (preventDefault()) est le seul à prendre, mais vous devez savoir ce contexte, vous êtes et ce que vos objectifs sont.

    De carburant de Votre Codage a une grande article sur return false; et événement.preventDefault() et événement.stopPropagation() et événement.stopImmediatePropagation().

    • Le lien de référence est cassé, donne erreur 502.
    • Voir ma note ajoutée avec un lien vers l'archive de la version
    InformationsquelleAutor JAAulde
  5. 54

    Lors de l'utilisation de jQuery, return false est en train de faire 3 choses distinctes quand vous l'appelez:

    1. event.preventDefault();
    2. event.stopPropagation();
    3. Cesse de rappel d'exécution 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.

    InformationsquelleAutor James Drinkard
  6. 40

    Vous pouvez accrocher un lot de fonctions sur le onClick événement pour un élément. Comment pouvez-vous être sûr que le false sera la dernière à feu? preventDefault sur l'autre main sera certainement éviter seulement le comportement par défaut de l'élément.

    InformationsquelleAutor Eldar Djafarov
  7. 19

    Je pense que

    event.preventDefault()

    est le w3c précis de l'annulation d'événements.

    Vous pouvez lire ceci dans la spec W3C sur Cas d'annulation.

    Aussi, vous ne pouvez pas utiliser return false dans chaque situation. Quand on donne une fonction javascript dans l'attribut href et si vous retourne la valeur false, alors l'utilisateur sera redirigé vers une page avec de la fausse chaîne écrite.

    • Pas dans n'importe quel navigateur j'ai jamais rencontré. Peut-être que vous avez confondu avec <a href="javascript:return false" ou quelque chose?
    • -1; le droit qu'a href retourne la valeur false va générer une page de texte avec le mot "faux" écrit sur elle est un non-sens complet.
    • (moins)1; lien cassé + non-sens complet
    InformationsquelleAutor rahul
  8. 14

    Je pense que la meilleure façon de le faire est d'utiliser event.preventDefault() parce que si une exception est levée dans le gestionnaire, puis le retour false déclaration sera ignoré et le comportement serait contraire à ce que vous voulez.

    Mais si vous êtes sûr que le code ne sera pas déclencher des exceptions, alors vous pouvez aller avec un de la méthode que vous souhaitez.

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

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

    Mon avis, de mon expérience, en disant qu'il est toujours préférable d'utiliser 

    event.preventDefault()

    Pratiquement
    pour arrêter ou prévenir soumettre les cas, si nous avions besoin plutôt que de return false
    event.preventDefault() fonctionne très bien.

    • Mieux, pourquoi? Vous avez littéralement donné zéro justification que ce soit ici. -1.
    • Dans le cas où il y a plusieurs liaisons d'événements e.preventDefault() est plus ciblée que le retour de faux.
    • preventDefault est quelques mots d'anglais que je comprends "prévient la par défaut". return false est quelques mots d'anglais que je comprends qu'il "retourne false" mais je n'ai aucune idée de la raison jusqu'à ce que je Google ce code obscur. Et en bonus, je peux contrôler séparément stopPropagation et preventDefault .
    InformationsquelleAutor Dilip0165
  10. 1

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

    Lorsque 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();
    InformationsquelleAutor Abdullah Shoaib
  11. 1

    e.preventDefault();

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

    Exemple Ex.:-

    empêche le lien hypertexte à partir de la suite de l'URL, empêche le bouton soumettre pour envoyer le formulaire. Lorsque vous avez de nombreux gestionnaires d'événement et vous voulez juste vous prévenir par défaut de l'événement de se produire, & ... à de nombreuses reprises,
    pour cela nous avons besoin d'utiliser dans le haut de la fonction().

    Raison:-

    La raison d'utiliser des e.preventDefault(); est que dans notre code si quelque chose va mal dans le code, puis elle va permettre d'exécuter le lien ou le formulaire pour obtenir des soumis ou permettre d'exécuter ou de permettre à toute action que vous devez faire. & lien ou un bouton de soumission sont soumis & encore permettre la poursuite de la propagation de l'événement.

    HTML:

    <!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 s'arrête tout simplement l'exécution de la fonction().

    "return false;" ce sera la fin de l'ensemble de l'exécution des processus.

    Raison:-

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

    HTML:

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

    InformationsquelleAutor Parth Raval
  12. 0

    Fondamentalement, de cette façon, vous combiner les choses parce que jQuery est un framework qui se concentre principalement sur les éléments HTML, vous avez essentiellement la prévention de la valeur par défaut, mais en même temps, vous arrêter la propagation de la bulle vers le haut.

    Donc, nous pouvons dire plus simplement, retourner false dans jQuery est égale à:

    return false est e.preventDefault ET de l'e.stopPropagation

    Mais aussi n'oubliez pas, c'est tout en 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 les return false;, d'abord comprendre ce que e.preventDefault(); et e.stopPropagation(); faire, alors si vous pensez que vous avez besoin tous les deux en même temps, puis il suffit de l'utiliser.

    Donc, fondamentalement, ce code ci-dessous:

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

    est l'égalité des à ce code:

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

    À partir de mon expérience de l'événement.stopPropagation() est surtout utilisé dans les CSS de l'effet ou de l'animation, par exemple lorsque vous avez passez de l'effet de la carte et de l'élément de bouton, lorsque vous passez le curseur sur le bouton à la fois la carte et des boutons hover effet sera déclenchée dans ce cas, vous pouvez utiliser l'événement.stopPropagation() arrêter le bouillonnement des actions, et de l'événement.preventDefault() est pour éviter le comportement par défaut du navigateur actions. Par exemple, vous avez la forme, mais vous avez défini cliquez sur l'événement pour présenter l'action, si l'utilisateur soumet le formulaire en appuyant sur enter, le navigateur déclenchée par l'événement keypress, pas de votre événement cliquez ici, vous devez utiliser l'événement.preventDefault() pour éviter les comportements inappropriés. Je ne sais pas ce que l'enfer est return false; désolé.Pour plus de précisions, visitez ce lien et de jouer avec la ligne 33, https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

    InformationsquelleAutor Sathish Shajahan