Quel est l'effet de l'ajout de «return false» à un écouteur d'événements Click?

Plusieurs fois, j'ai vu des liens comme ceux-ci dans les pages HTML:

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

Quel est l'effet du return falsededans?

De plus, je ne vois généralement pas cela dans les boutons.

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

La valeur de retour d'un gestionnaire d'événements détermine si le comportement par défaut du navigateur doit également avoir lieu. Dans le cas d'un clic sur des liens, ce serait suivre le lien, mais la différence est plus notable dans les gestionnaires d'envoi de formulaire, où vous pouvez annuler une soumission de formulaire si l'utilisateur a fait une erreur en entrant 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 de "DOM 0" et sont pour la plupart non spécifiées. Vous aurez peut-être de la chance de lire l'ancienne documentation de Netscape 2.

La manière moderne d'obtenir cet effet est d'appeler event.preventDefault(), ce qui est spécifié dans la spécification DOM 2 Events .

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>

Cliquer 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.

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

Un exemple de la façon dont cela serait utilisé 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);
}

QUE FAIT VRAIMENT «retourner faux» ?

return false fait en fait trois choses très 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 jquery-events-stop-misusing-return-false pour plus d'informations.

Par exemple :

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

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

Un nouveau réglage faux d'un événement JavaScript annule généralement le comportement "par défaut" - dans le cas des liens, il indique au navigateur de ne pas suivre le lien.

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

Dans votre exemple, le navigateur n'essaiera pas d'aller à #.

Retourner false arrêtera le lien hypertexte suivi après l'exécution du javascript. Ceci est utile pour un javascript discret qui se dégrade gracieusement - par exemple, vous pouvez avoir une image miniature qui utilise javascript pour ouvrir une fenêtre contextuelle de l'image en taille réelle. Lorsque javascript est désactivé ou que l'image est cliquée au milieu (ouverte dans un nouvel onglet), cela ignore l'événement onClick et ouvre simplement l'image en tant qu'image pleine taille normalement.

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

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 arrête le href de fonctionner. 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 exécutera jamais - il n'y a pas de href pour traiter et aller.

Le retour false indique de ne pas effectuer l'action par défaut, qui dans le cas d'un <a href>est de suivre le lien. Lorsque vous retournez false au onclick, le href sera ignoré.

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

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

Le return falseempêche la navigation de la page et le défilement indésirable d'une fenêtre vers le haut ou le bas.

onclick="return false"

Je suis surpris que personne n'ait mentionné à la onmousedownplace de onclick. le

onclick='return false'

ne détecte pas le comportement par défaut du navigateur entraînant une sélection de texte (parfois indésirable) pour mousedownmais

onmousedown='return false'

Est-ce que.

En d'autres termes, lorsque je clique sur un bouton, son texte est parfois accidentellement sélectionné, modifiant 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' mousedownévénement est enregistré avant click, donc si vous empêchez seulement ce comportement à l'intérieur de votre clickgestionnaire, cela n'affectera pas la sélection indésirable résultant de l' mousedownévénement. Le texte est donc toujours sélectionné. Cependant, la prévention du défaut pour l' mousedownévénement fera l'affaire.

Voir aussi event.preventDefault () vs. return false

J'ai ce lien sur ma page HTML:

<a href = "" 
onclick = "setBodyHtml ('new content'); return false; "
> click here </a>

La fonction setBodyHtml () est définie comme:

function setBodyHtml (s)
{ document.body.innerHTML = s;
}

Lorsque je clique sur le lien, le lien disparaît et le texte affiché dans le navigateur devient "nouveau contenu".

Mais si je supprime le "faux" de mon lien, cliquer sur le lien ne fait (apparemment) rien. Pourquoi donc?

C'est parce que si je ne retourne pas false, le comportement par défaut de cliquer sur le lien et d'afficher sa page cible se produit, n'est pas annulé. MAIS, ici le href de l'hyperlien est "" donc il renvoie à la même page courante. Ainsi, la page est effectivement juste actualisée et apparemment rien ne se passe.

En arrière-plan, la fonction setBodyHtml () est toujours exécutée. Il affecte son argument à body.innerHTML. Mais parce que la page est immédiatement actualisée / rechargée, le contenu du corps modifié ne reste peut-être pas visible plus de quelques millisecondes, donc je ne le verrai pas.

Cet exemple montre pourquoi il est parfois UTILE d'utiliser "return false".

Je veux assigner QUELQUES href au lien, pour qu'il apparaisse comme un lien, comme du texte souligné. Mais je ne veux pas que le clic sur le lien recharge efficacement la page. Je veux que ce comportement de navigation = par défaut soit annulé et quels que soient les effets secondaires provoqués par l'appel de ma fonction pour qu'elle prenne et reste en vigueur. Je dois donc "retourner faux".

L'exemple ci-dessus est quelque chose que vous essayeriez rapidement pendant le développement. Pour la production, vous affecteriez plus probablement un gestionnaire de clics en JavaScript et appeleriez preventDefault () à la place. Mais pour un essai rapide, le "retour faux" ci-dessus fait l'affaire.

Lorsque vous utilisez des formulaires, nous pouvons utiliser «return false» pour empêcher la soumission.

function checkForm() {
    // return true to submit, return false to prevent submitting
}
<form onsubmit="return checkForm()">
    ...
</form>