Que signifie "javascript:void(0)" ?

Question

<a href="javascript:void(0)" id="loginlink">login</a>

J'ai vu de telles href à plusieurs reprises, mais je ne sais pas ce que cela signifie exactement.

Answer 1

Le site void L'opérateur évalue l'expression donnée et renvoie ensuite undefined .

Le site void L'opérateur est souvent utilisé uniquement pour obtenir le undefined primitif en utilisant généralement " void(0) "(ce qui est équivalent à " void 0 "). Dans ces cas cas, la variable globale undefined peut être utilisé à la place (en supposant qu'il n'a pas été assigné à une valeur non par défaut).

Une explication est fournie ici : void opérateur .

La raison pour laquelle vous voudriez faire cela avec l'option href d'un lien est que normalement, un javascript: URL redirigera le navigateur vers une version en texte clair du résultat de l'évaluation de ce JavaScript. Mais si le résultat est undefined le navigateur reste sur la même page. void(0) est juste le plus petit script possible qui évalue comme undefined .

Answer 2

En plus de la réponse technique, javascript:void signifie que l'auteur fait fausse route.

Il n'y a aucune raison valable d'utiliser un javascript: pseudo-URL(*). En pratique, cela entraînera des confusions ou des erreurs si quelqu'un essaie des choses comme "lien en signet", "ouvrir le lien dans un nouvel onglet", etc. Cela arrive assez souvent maintenant que les gens se sont habitués au clic du milieu pour le nouvel onglet : cela ressemble à un lien, vous voulez le lire dans un nouvel onglet, mais il s'avère que ce n'est pas du tout un vrai lien, et cela donne des résultats indésirables comme une page blanche ou une erreur JS quand on fait un clic du milieu.

<a href="#"> est une alternative commune qui peut être considérée comme moins mauvaise. Cependant, vous devez vous rappeler return false de votre onclick pour éviter que le lien ne soit suivi et que l'on fasse défiler la page jusqu'en haut.

Dans certains cas, il peut y avoir un endroit réellement utile vers lequel pointer le lien. Par exemple, si vous disposez d'un contrôle sur lequel vous pouvez cliquer et qui ouvre une fenêtre précédemment cachée <div id="foo"> il est logique d'utiliser <a href="#foo"> pour y accéder. Ou s'il existe un moyen non JavaScript de faire la même chose (par exemple, "thispage.php?show=foo" qui rend foo visible dès le départ), vous pouvez créer un lien vers celui-ci.

Sinon, si un lien pointe uniquement vers un script, ce n'est pas vraiment un lien et il ne doit pas être marqué comme tel. L'approche habituelle serait d'ajouter la balise onclick à un <span> , <div> ou un <a> sans un href et le styliser d'une manière ou d'une autre pour qu'il soit clair que vous pouvez cliquer dessus. C'est ce que StackOverflow [faisait au moment de la rédaction de ce document ; maintenant, il utilise l'option href="#" ].

L'inconvénient est que vous perdez le contrôle du clavier, puisque vous ne pouvez pas tabuler sur un span/div/bare-a ou l'activer avec un espace. La question de savoir s'il s'agit réellement d'un inconvénient dépend du type d'action auquel l'élément est destiné. Vous pouvez, au prix d'un certain effort, essayer d'imiter l'interactivité du clavier en ajoutant une balise tabIndex à l'élément, et à l'écoute d'une pression sur la touche Espace. Mais cela ne reproduira jamais à 100% le comportement réel du navigateur, notamment parce que différents navigateurs peuvent répondre au clavier différemment (sans parler des navigateurs non visuels).

Si vous voulez vraiment un élément qui n'est pas un lien mais qui peut être activé normalement par la souris ou le clavier, ce que vous voulez c'est un <button type="button"> (ou <input type="button"> est tout aussi bon, pour les contenus textuels simples). Vous pouvez toujours utiliser une feuille de style en cascade pour le faire ressembler davantage à un lien qu'à un bouton, si vous le souhaitez. Mais comme il se comporte comme un bouton, c'est comme ça que vous devez le marquer.

(* : dans la création de sites, en tout cas. Ils sont évidemment utiles pour les bookmarklets. javascript: Les pseudo-URL sont une bizarrerie conceptuelle : un localisateur qui ne pointe pas vers un emplacement, mais appelle du code actif à l'intérieur de l'emplacement actuel. Ils ont causé des problèmes de sécurité massifs tant pour les navigateurs que pour les applications web, et n'auraient jamais dû être inventés par Netscape).

Answer 3

Ça veut dire que ça ne fera rien. C'est une tentative pour que le lien ne "navigue" nulle part. Mais ce n'est pas la bonne méthode.

Vous devriez en fait juste return false dans le onclick comme ceci :

<a href="#" onclick="return false;">hello</a>

Il est généralement utilisé si le lien fait quelque chose de "JavaScript". Comme l'affichage d'un formulaire AJAX, ou l'échange d'une image, ou autre. Dans ce cas, il suffit de faire en sorte que la fonction appelée renvoie false .

Toutefois, pour que votre site soit totalement génial, vous incluez généralement un lien qui effectue la même action, si la personne qui le consulte choisit de ne pas exécuter JavaScript.

<a href="backup_page_displaying_image.aspx"
   onclick="return coolImageDisplayFunction();">hello</a>

Answer 4

Il y a une énorme différence entre le comportement de "#" et celui de javascript:void.

"#" vous fait défiler vers le HAUT de la page alors que "javascript:void(0) ;" ne le fait pas.

Ceci est très important si vous codez des pages dynamiques. l'utilisateur ne veut pas revenir en arrière juste parce qu'il a cliqué sur un lien dans la page.

Answer 5

Vous devriez toujours avoir un href sur votre a tags. L'appel d'une fonction Javascript qui renvoie "undefined" fera l'affaire. Il en va de même pour les liens vers '#'.

Dans IE6, les balises d'ancrage sans href ne se voient pas appliquer le style a:hover.

Oui, c'est terrible et c'est un petit crime contre l'humanité, mais c'est aussi le cas d'IE6 en général.

J'espère que cela vous aidera.

EDIT : IE6 est en fait un crime majeur contre l'humanité.