Event.preventDefault () vs faux retour

Question

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 utiliser preventDefault à la place? Quelle est la meilleure façon de faire?

Answer 1

return false de dans un jQuery gestionnaire d'événement est effectivement la même que l'appel à la les deux e.preventDefault et e.stopPropagation sur le passé de 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 et d' return false fera les deux. Notez que ce comportement diffère de la normale (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

http://www.mail-archive.com/jquery-en@googlegroups.com/msg71371.html

Answer 2

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

Answer 3

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

jQuery et précédemment lié à la citation de John Resig (en karim79 du 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.

Les documents suivants auprès de MDC explique comment return false dans un gestionnaire d'événement œuvres: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/More_Event_Handlers#Prevent_Default_Action

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 le DOM du W3C 2 Événements de la documentation.

Answer 4

En règle générale, votre première option ( `` ) est le seul à prendre, mais il faut savoir quel contexte vous êtes et quels sont vos objectifs. Un excellent article à ce sujet : http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Answer 5

``fait 3 choses distinctes lorsque vous l’appelez :

1. ``
2. ``
3. Arrête l’exécution du rappel et retourne immédiatement lorsque appelé.

Voir jQuery évènements : Stop (Mis) à l’aide de Return False pour plus d’informations et d’exemples.