web-dev-qa-db-fra.com

Quel est l'effet de l'ajout de 'return false' à un écouteur d'événement click?

J'ai souvent vu des liens comme ceux-ci dans des pages HTML:

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

Quel est l'effet du return false là-dedans?

En outre, je ne vois généralement pas cela dans les boutons.

Est-ce spécifié quelque part? Dans certaines spécifications de w3.org?

javascripthtml
343
Leonel

La valeur de retour d'un gestionnaire d'événements détermine si le comportement du navigateur par défaut doit également avoir lieu. En cas de clic sur des liens, le lien suivrait, mais la différence est plus notable dans les gestionnaires de soumission de formulaire, dans lesquels vous pouvez annuler une soumission de formulaire si l'utilisateur a commis une erreur en saisissant les informations.

Je ne crois pas qu'il existe une spécification W3C pour cela. Toutes les anciennes interfaces JavaScript comme celle-ci ont reçu le surnom "DOM 0" et sont pour la plupart non spécifiées. Vous aurez peut-être un peu de chance en lisant l’ancienne documentation de Netscape 2.

La méthode moderne pour obtenir cet effet consiste à appeler event.preventDefault(), et ceci est spécifié dans spécification DOM 2 Events .

300
Jim

Vous pouvez voir la différence avec l'exemple suivant:

<a href="http://www.google.co.uk/" onclick="return (confirm('Follow this link?'))">Google</a>

En cliquant sur "OK" renvoie vrai, et le lien est suivi. Cliquer sur "Annuler" renvoie faux et ne suit pas le lien. Si javascript est désactivé, le lien est suivi normalement.

160
HoboBen

Voici une routine plus robuste pour annuler le comportement par défaut et la propagation d'événements dans tous les navigateurs:

// Prevents event bubble up or any usage after this is called.
eventCancel = function (e)
{
    if (!e)
        if (window.event) e = window.event;
    else return;
    if (e.cancelBubble != null) e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    if (window.event) e.returnValue = false;
    if (e.cancel != null) e.cancel = true;
}

Voici un exemple d'utilisation de ce type dans un gestionnaire d'événements:

// Handles the click event for each tab
Tabstrip.tabstripLinkElement_click = function (evt, context) 
{
    // Find the tabStrip element (we know it's the parent element of this link)
    var tabstripElement = this.parentNode;
    Tabstrip.showTabByLink(tabstripElement, this);
    return eventCancel(evt);
}
27
Herb Caudill

QU'EST-CE QUE "renvoie faux" IS VRAIMENT?

return false est en fait en train de faire trois choses bien distinctes quand 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 jquery-events-stop-abus-use-return-false pour plus d'informations.

Par exemple:

en cliquant sur ce lien, retourne false annule le comportement par défaut du navigateur .

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>
21
kamesh

Réaffecter la valeur false à un événement JavaScript annule généralement le comportement "par défaut" - dans le cas de liens, il indique au navigateur de ne pas suivre le lien.

15
Neall

Je crois que cela empêche l'événement standard de se produire.

Dans votre exemple, le navigateur n'essaiera pas d'accéder à #.

12
Guvante

Retourne faux arrêtera le lien hypertexte une fois le javascript exécuté. Ceci est utile pour le javascript discret qui se dégrade gracieusement - par exemple, vous pouvez avoir une vignette qui utilise javascript pour ouvrir une fenêtre contextuelle de l'image en taille réelle. Lorsque le javascript est désactivé ou que vous cliquez sur le bouton du milieu de l'image (ouvert dans un nouvel onglet), l'événement onClick est ignoré et ouvre simplement l'image en format normal.

Si return false n'est pas spécifié, l'image lancera la fenêtre contextuelle et l'ouvrira normalement. Certaines personnes au lieu d'utiliser return false utilisent javascript comme attribut href, mais cela signifie que lorsque le javascript est désactivé, le lien ne fait rien.

12
HoboBen

l'utilisation de return false dans un événement onclick empêche le navigateur de traiter le reste de la pile d'exécution, ce qui inclut le suivi du lien dans l'attribut href.

En d'autres termes, l'ajout de return false empêche le fonctionnement de href. Dans votre exemple, c'est exactement ce que vous voulez.

Dans les boutons, ce n'est pas nécessaire car onclick est tout ce qu'il va exécuter - il n'y a pas de href à traiter et aller à.

7
pixel

Le retour false indique de ne pas prendre l'action par défaut, qui dans le cas d'un <a href> doit suivre le lien. Lorsque vous renvoyez false à onclick, la href sera ignorée.

5
stephenbayer

Piratage du navigateur: http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

4
Chris Ballance

return false empêche la navigation dans la page et le défilement indésirable d’une fenêtre vers le haut ou le bas.

onclick="return false"
3
Shivakrishna

Je suis surpris que personne n'ait mentionné onmousedown au lieu de onclick. le

onclick='return false'

ne détecte pas le comportement par défaut du navigateur, ce qui entraîne une sélection de texte (parfois non souhaitée) pour mousedown, mais

onmousedown='return false'

est-ce que.

En d'autres termes, lorsque je clique sur un bouton, son texte est parfois sélectionné accidentellement, ce qui change l'apparence du bouton, ce qui peut être indésirable. C’est le comportement par défaut que nous essayons d’empêcher ici. Cependant, l'événement mousedown est enregistré avant click. Par conséquent, si vous empêchez uniquement ce comportement dans votre gestionnaire click, il n'aura aucune incidence sur la sélection non souhaitée résultant de l'événement mousedown. . Donc, le texte est toujours sélectionné. Cependant, empêcher le défaut pour l'événement mousedown fera l'affaire.

Voir aussi event.preventDefault () vs. return false

3
Dmitri Zaitsev

Retourne faux empêchera la navigation. Sinon, l'emplacement deviendrait la valeur de retour de someFunc

3
ncgz