Question 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 suivantes. Je vais utiliser 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;
});

Y a-t-il une différence significative entre ces deux méthodes d'arrêt de la propagation d'un événement?

Pour moi, return false; est plus simple, plus court et probablement moins sujette aux erreurs que l'exécution d'une méthode. Avec la méthode, vous devez vous souvenir de la bonne enveloppe, des parenthèses, etc.

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


2646
2017-08-31 11:58


origine


Réponses:


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

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. Notez que ce comportement diffère de Ordinaire gestionnaires d'événements (non jQuery), dans lesquels, notamment, return false Est-ce que ne pas arrêter l'événement de bouillir.

La source: John Resig

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


2596
2017-08-31 12:05



D'après mon expérience, il y a au moins un avantage évident à utiliser event.preventDefault () en utilisant return false. Supposons que vous capturiez l'événement click sur une balise d'ancrage, sinon ce serait un gros problème si l'utilisateur devait être éloigné de la page en cours. 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 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'avantage d'utiliser event.preventDefault () est que vous pouvez ajouter ceci comme première ligne dans le gestionnaire, garantissant ainsi que le comportement par défaut de l'ancre ne se déclenchera pas, même si la dernière ligne de la fonction n'est 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.
});

392
2018-01-22 22:37



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

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

Fait: 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 d'événement. Les gestionnaires d'événements ont toujours fonctionné de cette façon, depuis l'ancien temps de Netscape Navigator.

le documentation de MDN explique comment return false dans un gestionnaire d'événements fonctionne

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 complètement différents.

Pour plus de lecture, voir attachEvent sur MSDN et le W3C DOM 2 Documentation d'événements.


89
2018-06-20 21:31



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

Alimenter votre codage a un bon article sur return false; contre event.preventDefault() contre event.stopPropagation() contre event.stopImmediatePropagation().

REMARQUE: le Alimenter votre codage lien ci-dessus a produit des erreurs 5xx depuis un certain temps. J'ai trouvé une copie dans le Archive Internet, l'a imprimé au format PDF et l'a mis dans Dropbox: Archivé article sur return false; contre event.preventDefault() contre event.stopPropagation() contre event.stopImmediatePropagation()  (PDF)


58
2018-04-09 18:32



Lorsque vous utilisez jQuery, return false fait 3 choses distinctes quand vous l'appelez:

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

Voir Evénements jQuery: Arrêtez (Mis) à l'aide de Return False pour plus d'informations et d'exemples.


51
2018-02-19 15:54



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


37
2017-08-31 12:02



je pense

event.preventDefault()

est la manière spécifiée par w3c d'annuler des événements.

Vous pouvez lire ceci dans la spécification W3C sur Annulation d'événement.

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


17
2017-08-31 12:04



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

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

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

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

13
2018-03-09 19:27



Mon avis de 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 de soumission, chaque fois que nous avons besoin plutôt que return false event.preventDefault() fonctionne bien.


0
2017-09-29 11:28