Que signifie «javascript: void (0)»?

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

J'ai vu tant hrefde fois, mais je ne sais pas exactement ce que cela signifie.

OMG
la source
12
javascript:est l'un des nombreux schémas d'URI: en.wikipedia.org/wiki/URI_scheme , comme data:.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
3
Vous pouvez utiliser juste href="javascript:"dans le même but. Comme indiqué dans la réponse à cette question , la void(0)partie était à l'origine destinée aux premières versions de navigateurs où la javascript:gestion des URI était différente. Mais maintenant, je ne pouvais même pas trouver une version où la sténographie ne fonctionnerait pas, au moins IE7 gère cela correctement.
utilisateur
1
J'ai également vu href = "javascript: //", est-ce mieux?
sabre laser
href = "javascript: //" ne fonctionne pas pour moi void (0) fonctionne parfaitement.
sandip

Réponses:

1041

L' voidopérateur évalue l'expression donnée puis retourne undefined.

L' voidopérateur est souvent utilisé simplement pour obtenir la undefinedvaleur primitive, généralement en utilisant « void(0)» (ce qui équivaut à « void 0»). Dans ces cas, la variable globale undefined peut être utilisée à la place (en supposant qu'elle n'a pas été affectée à une valeur non par défaut).

Une explication est fournie ici: voidopérateur .

La raison pour laquelle vous souhaitez le faire avec hrefun lien est que normalement, une javascript:URL redirige le navigateur vers une version en texte brut 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 un script court et simple à évaluer undefined.

rahul
la source
9
qu'est-ce que cela signifie lorsque href reçoit une "valeur primitive non définie"?
omg
7
"normalement une javascript: url redirigera le navigateur vers une version en texte brut du résultat de l'évaluation de ce javascript." Pouvez-vous faire un exemple ici? Je n'ai jamais vu une telle utilisation.
omg
87
Un exemple de ce dont parle Phoenix est <a href="javascript: dosomething();"> FAITES-LE MAINTENANT! </a>. Si dosomething renvoie false, cliquer sur le lien entraînera simplement la sortie du navigateur et affichera "false". Cependant ... <a href="javascript: dosomething(); void(0)"> À FAIRE MAINTENANT! </a> évite le problème. Allez-y et collez javascript: 1 + 1; dans la barre d'adresse de votre navigateur. Le navigateur devrait afficher "2"
Breton
9
Parce que void est un opérateur unaire. Le vide n'est pas une valeur, ni une fonction. Il a besoin d'une valeur pour fonctionner à sa droite, sinon il générera une erreur.
Breton
14
essayez de chercher dans la console d'erreur? Il jette définitivement une erreur de syntaxe. C'est du javascript invalide. Douglas Crockford recommande de rester à l'écart du vide en raison de la confusion unaire opérateur / fonction / valeur qui est trop coûteuse à gérer.
Breton
436

En plus de la réponse technique, javascript:voidsignifie que l'auteur se trompe.

Il n'y a aucune bonne raison d'utiliser une javascript:pseudo-URL (*). En pratique, cela causera de la confusion ou des erreurs si quelqu'un essaie des choses comme «lien de signet», «ouvrir le lien dans un nouvel onglet», etc. Cela se produit beaucoup maintenant, les gens se sont habitués au clic du milieu pour un 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 donne des résultats indésirables comme une page vierge ou une erreur JS lorsque vous cliquez avec le bouton central.

<a href="#">est une alternative courante qui pourrait sans doute être moins mauvaise. Cependant, vous devez vous souvenir return falsede votre onclickgestionnaire d'événements pour empêcher le lien d'être suivi et de défiler vers le haut de la page.

Dans certains cas, il peut y avoir un endroit réellement utile pour pointer le lien. Par exemple, si vous avez un contrôle sur lequel vous pouvez cliquer pour ouvrir un élément précédemment masqué <div id="foo">, il est judicieux d'utiliser un <a href="#foo">lien vers celui-ci. Ou s'il existe une manière non JavaScript de faire la même chose (par exemple, 'thispage.php? Show = foo' qui définit foo visible pour commencer), vous pouvez créer un lien vers cela.

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

L'inconvénient est que vous perdez le contrôle du clavier, car vous ne pouvez pas taper sur un span / div / bare-a ou l'activer avec de l'espace. Que ce soit réellement un inconvénient dépend du type d'action que l'élément est censé entreprendre. Vous pouvez, avec un certain effort, essayer d'imiter l'interactivité du clavier en ajoutant un tabIndexà l'élément et en écoutant une pression sur l'espace. Mais il ne reproduira jamais à 100% le comportement réel du navigateur, notamment parce que différents navigateurs peuvent répondre différemment au clavier (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 est un <button type="button">(ou <input type="button">tout aussi bon, pour un contenu textuel simple). Vous pouvez toujours utiliser CSS pour le recomposer afin qu'il ressemble plus à un lien qu'à un bouton, si vous voulez. Mais comme il se comporte comme un bouton, c'est comme ça qu'il faut vraiment le marquer.

(*: dans la création de sites, de toute façon. De toute évidence, ils sont utiles pour les bookmarklets. Les javascript:pseudo-URL sont une bizarrerie conceptuelle: un localisateur qui ne pointe pas vers un emplacement, mais appelle plutôt du code actif à l'intérieur de l'emplacement actuel. Ils ont provoqué une sécurité massive problèmes pour les navigateurs et les applications Web, et n'aurait jamais dû être inventé par Netscape.)

bobince
la source
7
En plus de l'excellent article de @bobince: j'ai fait des recherches il y a quelques mois sur la navigabilité du clavier entre les navigateurs href, y compris les bizarreries et les effets secondaires; certains d'entre vous pourraient trouver cela utile: jakub-g.github.com/accessibility/onclick
jakub.g
2
@ThinkBonobo: SO a changé à un moment donné depuis 2009! Mise à jour.
bobince
59
Ceci est une opinion et ne répond pas à la question. void(0)est nécessaire dans de nombreux cas; "#" est un hack qui apporte une multitude de problèmes (cela ne fonctionnerait pas dans l'application que j'écris, qui m'a amené à cette page).
felwithe
12
Je suis d'accord avec @feltwithe. Pourquoi forcer les autres à "le faire d'une manière particulière"? En 15 ans de programmation, je n'ai pas encore vu comment la devise "cela devrait toujours être fait de cette façon" ne conduit pas les gens à un gâchis de leur propre fabrication
Steven de Salas
4
L'utilisation de l'ID de fragment est une mauvaise idée du point de vue UX car elle fait sauter le document en haut de la page sauf si elle preventDefaultest utilisée. Veuillez ne pas le faire dans le cas où une ancre est utilisée comme bouton sur un formulaire.
Josh Habdas
124

Cela signifie que cela ne fera rien. C'est une tentative pour que le lien ne «navigue» nulle part. Mais ce n'est pas la bonne façon.

Vous devriez en fait juste return falsedans l' onclickévénement, comme ceci:

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

En règle générale, il est utilisé si le lien fait quelque chose de «JavaScript-y». Comme publier un formulaire AJAX, ou échanger une image, ou autre chose. Dans ce cas, vous effectuez simplement la fonction appelée Return false.

Pour rendre votre site Web complètement génial, cependant, vous incluerez généralement un lien qui fait la même action, si la personne qui le visite choisit de ne pas exécuter JavaScript.

<a href="backup_page_displaying_image.aspx"
   onclick="return coolImageDisplayFunction();">hello</a>
Noon Silk
la source
33
no no - return false arrêtera le comportement par défaut, donc le # n'apparaîtra jamais
Magnar
22
le protocole javascript: url est un standard de facto, pas un vrai standard. Ainsi, le href = "#" onclick = "return false;" est conforme aux normes alors que href = "javascript: void (0)" ne l'est pas, car il n'y a pas de norme officielle qui spécifie ce que cela doit faire.
Breton
10
En plus de cela, Douglas Crockford n'aime pas le vide, donc jslint s'en plaindra. Fondamentalement, puisque void est un opérateur et non une valeur, il est déroutant et engendre de nombreuses questions telles que celle-ci. Mieux vaut l'éviter complètement. haha.
Breton
4
Brandon: voir les réponses de brenton. La manière que je recommande est la plus prise en charge et comme je l'ai dit dans la deuxième partie de mon article, dans un site `` correct '', vous n'utiliserez même jamais '#', car vous fournirez des systèmes de secours pour gérer un manque de javascript.
Noon Silk
19
+1 pour inclure l' exemple complètement génial . Même si vous n'avez pas de solution de remplacement HTML statique pour ce que vous faites en JavaScript, vous pouvez toujours faire quelque chose comme <a href="enableJavaScriptToSeeMyCompletelyAwesomeSite.html" onclick="completelyAwesome();return false;">.
Grant Wagner
73

Il y a une énorme différence dans le comportement de "#" vs javascript: void

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

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

Salvin Francis
la source
26
@Salvin: Le comportement de défilement vers le haut de la page peut être supprimé en revenant falseau gestionnaire d'événements:, onclick="doSomething();return false;"ou s'il doSomething()revient false, vous pouvez utiliser onclick="return doSomething();".
Grant Wagner
41
@GrantWagner - Ou, 5 ans plus tard, e.preventDefault().
trysis
1
Vous voudrez peut-être modifier / supprimer cette réponse car "#"ne défile pas vers le haut lorsque vous retournez false.
Navin
4
@Navin, vous avez raison, mais c'est désormais une pratique dépassée. Le commentaire par trysis est considéré comme la bonne façon maintenant.
Tim Seguine du
66

Il s'agit d'une méthode très populaire pour ajouter des fonctions JavaScript aux liens HTML.
Par exemple: les [Print]liens que vous voyez sur de nombreuses pages Web sont écrits comme ceci:

<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>

Pourquoi avons-nous besoin hrefalors que onclickseuls peuvent faire le travail? Parce que lorsque les utilisateurs survolent le texte «Imprimer» alors qu'il n'y en a pas href, le curseur se transforme en signe d'insertion (ꕯ) au lieu d'un pointeur (👆). Seul le fait d'avoir hrefsur un atag le valide en tant que lien hypertexte.

Une alternative à href="javascript:void(0);", est l'utilisation de href="#". Cette alternative ne nécessite pas d'activer JavaScript dans le navigateur de l'utilisateur, elle est donc plus compatible.

Huy - Vuong Do Thanh
la source
7
rien n'est utile non plus si javascript est désactivé.
Jasen
12
Vous n'avez pas besoin hrefd'obtenir le curseur de la main pointée; il suffit d'un peu de CSS.
John Montgomery
1
Pourquoi ne mettriez-vous pas la fonction JavaScript dans le href au lieu du onclick?
Siddhartha Gandhi
2
Je suis d'accord avec @Sid - si vous l'utilisez pour déclencher une fonction javascript, alors <a href="javascript:callPrintFunction()">c'est plus propre (bien que cela devrait probablement être un buttonplutôt qu'un anchor s'il ne vous emmène réellement nulle part).
DaveMongoose
href="#"peut entraîner de mauvaises surprises - comme les demandes xhr avortées, qui se trouvent être appelées en cliquant sur ce lien. J'ai récemment eu du mal à déboguer un site Web qui avait abandonné la connexion oidc demandée, si l'utilisateur se trouvait à une adresse qui n'était pas la racine du site. #href l'a obligé à recharger l'adresse avant que la requête xhr ne soit terminée.
JustAMartin
44

Vous devriez toujours avoir un href sur vos un tags. Appeler une fonction JavaScript qui renvoie 'non défini' fera l'affaire. Il en sera de même pour le lien vers «#».

Les balises d'ancrage dans Internet Explorer 6 sans href n'obtiennent pas le a:hoverstyle appliqué.

Oui, c'est terrible et un crime mineur contre l'humanité, mais encore une fois, Internet Explorer 6 en général l'est aussi.

J'espère que ça aide.

Internet Explorer 6 est en fait un crime majeur contre l'humanité.

jscharf
la source
25

Il convient de mentionner que vous verrez parfois void 0 lors de la vérification d'undefined, simplement parce qu'il nécessite moins de caractères.

Par exemple:

something === undefined

contre.

something === void 0

Certaines méthodes de minification remplacent undefined par void 0 pour cette raison.

Bourrasque
la source
10
Un exemple notable est TypeScript ( exemple en direct ), qui compile les valeurs des paramètres par défaut à comparer void 0. La différence de 3 caractères s'additionne rapidement lorsque de nombreuses méthodes utilisent des valeurs de paramètres par défaut.
John Weisz
1
"Certaines méthodes de minification remplacent undefined par void 0 pour cette raison." Enfin je le comprends! Merci @squall pour la réponse complète.
Ahmed Mahmoud
22

L'utilisation de javascript:void(0)signifie que l'auteur du code HTML utilise abusivement l'élément d'ancrage à la place de l'élément bouton.

Les balises d'ancrage sont souvent utilisées abusivement avec l'événement onclick pour créer des pseudo-boutons en définissant href sur "#" ou "javascript: void (0)" pour empêcher la page de se rafraîchir. Ces valeurs provoquent un comportement inattendu lors de la copie / du déplacement de liens, de l'ouverture de liens dans de nouveaux onglets / fenêtres, de la création de signets et lorsque JavaScript est toujours en cours de téléchargement, des erreurs ou est désactivé. Cela transmet également une sémantique incorrecte aux technologies d'assistance (par exemple, les lecteurs d'écran). Dans ces cas, il est recommandé d'utiliser à la <button>place. En général, vous ne devez utiliser une ancre pour la navigation qu'en utilisant une URL appropriée.

Source: page de MDN<a> .

Ronnie Royston
la source
4
+1 pour avoir fait apparaître du HTML sémantique sur une vieille question ... Les liens vont aux endroits, les boutons font des choses - si nous ne voulons pas qu'il ressemble à un bouton, nous devons simplement effacer le style.
kevlarr
La grande exception à cela serait les cartes d'images, qui pourraient avoir besoin d'exécuter JavaScript; et comme ce n'est pas un bouton, c'est un lien qui a des limites polygonales, c'est la "seule" façon.
17

voidest un opérateur utilisé pour renvoyer une undefinedvaleur afin que le navigateur ne puisse pas charger une nouvelle page.

Les navigateurs Web essaieront de prendre tout ce qui est utilisé comme URL et le chargeront à moins que ce soit une fonction JavaScript qui renvoie null. Par exemple, si nous cliquons sur un lien comme celui-ci:

<a href="javascript: alert('Hello World')">Click Me</a>

alors un message d'alerte apparaîtra sans charger une nouvelle page, et c'est parce que alert c'est une fonction qui renvoie une valeur nulle. Cela signifie que lorsque le navigateur tente de charger une nouvelle page, il voit null et n'a rien à charger.

Une chose importante à noter à propos de l'opérateur void est qu'il nécessite une valeur et ne peut pas être utilisé seul. Nous devons l'utiliser comme ceci:

<a href="javascript: void(0)">I am a useless link</a>
Amr
la source
1
J'ai vu des gens utiliser javascript: null au lieu de void ... mais c'est un problème. Chrome null fonctionne, dans Firefox, il essaie de charger la page null. Heureux que vous ayez mis à jour. Bug intéressant.
Gavin Pickin
J'ai trouvé d'autres utilisations dans une base de code comme javascript: null mais avec javascript: null () qui n'est pas défini, donc cela fonctionne.
Gavin Pickin
1
Donc, fondamentalement, c'est comme prevendDefault et return false de jquery?
Robert Rocha
16

Pour comprendre ce concept, il faut d'abord comprendre l'opérateur void en JavaScript.

La syntaxe de l'opérateur void est: void «expr» qui évalue expr et renvoie undefined.

Si vous implémentez void en tant que fonction, cela ressemble à ceci:

function myVoid(expr) {
    return undefined;
}

Cet opérateur void a une utilisation importante qui est - la suppression du résultat d'une expression.

Dans certaines situations, il est important de renvoyer undefined par opposition au résultat d'une expression. Ensuite, void peut être utilisé pour rejeter ce résultat. Une telle situation implique des URL javascript: qui devraient être évitées pour les liens, mais qui sont utiles pour les bookmarklets. Lorsque vous visitez l'une de ces URL, de nombreux navigateurs remplacent le document actuel par le résultat de l'évaluation du «contenu» des URL, mais uniquement si le résultat n'est pas indéfini. Par conséquent, si vous souhaitez ouvrir une nouvelle fenêtre sans modifier le contenu actuellement affiché, vous pouvez effectuer les opérations suivantes:

javascript:void window.open("http://example.com/")
Gopal Yadav
la source
2
Merci d'avoir clarifié exactement à quoi sert l'argument en faveur de 'void'! Ce n'était pas clair dans les autres réponses, seulement que "le vide prend un argument".
dbeachy1
Bonne réponse mais un détail, l'implémentation void sera quelque chose comme: function myVoid(expr) { expr(); return undefined; } Vous avez oublié d'ajouter expr ();
Juanma Menendez
1
@Juanma Menendez: pas vrai. exprest déjà évalué lorsqu'il est myVoid()appelé (le résultat de cette expression est passé en paramètre)
Udo G
@UdoG Je suis curieux, comment savez-vous que les hommes? pouvez-vous s'il vous plaît expliquer.
Juanma Menendez
@JuanmaMenendez: les expressions dans les paramètres des fonctions sont toujours évaluées avant d'appeler la fonction elle-même. Désolé, je n'ai pas de document à portée de main qui le clarifie, mais essayez vous-même: function() { alert("foo"); }est une expression valide . void(function() { alert("foo"); })renvoie undefinedet n'affiche pas l'alerte, alors myVoid(function() { alert("foo"); })que (dans votre version, pas celle de Gopal Yadav ).
Udo G
14

L' voidopérateur évalue l'expression donnée, puis renvoie undefined. Cela évite de rafraîchir la page.

Abhay Singh
la source
9

Les développeurs Web l'utilisent javascript:void(0)car c'est le moyen le plus simple d'empêcher le comportement par défaut des abalises. void(*anything*)renvoie undefinedet c'est une valeur falsifiée. et renvoyer une valeur falsifiée est comme return falseen onclickcas de abalise qui empêche son comportement par défaut.

Je pense donc que javascript:void(0)c'est le moyen le plus simple d'empêcher le comportement par défaut du atag.

Mohamad Shiralizadeh
la source
8

Un lien doit avoir une cible HREF à spécifier pour lui permettre d'être un objet d'affichage utilisable.

La plupart des navigateurs n'analyseront pas le JavaScript avancé dans un

<A HREF="" 

balise telle que:

<A href="JavaScript:var elem = document.getElementById('foo');" 

car la balise HREF dans la plupart des navigateurs n'autorise pas les espaces, ou convertira les espaces en% 20, l'équivalent HEX d'un ESPACE, ce qui rend votre JavaScript absolument inutile à l'interpréteur.

Donc, si vous souhaitez utiliser une balise A HREF pour exécuter JavaScript en ligne, vous devez spécifier une valeur valide pour HREF FIRST qui n'est pas trop complexe (ne contient pas d'espaces), puis fournir le JavaScript dans une balise d'attribut d'événement comme OnClick , OnMouseOver, OnMouseOut, etc.

La réponse typique est de faire quelque chose comme ceci:

<A HREF="#" onclick="var elem = document.getElementById('foo');">Get the object</a>

Cela fonctionne bien, mais cela fait sauter la page vers le haut en raison du signe dièse / la balise de hachage lui dit de le faire.

Le simple fait de fournir un signe dièse / une balise de hachage dans une balise A HREF spécifie en fait l'ancrage racine, qui est toujours, par défaut, le haut de la page, vous pouvez spécifier un emplacement différent en utilisant la spécification de l'attribut NAME à l'intérieur d'une balise A HREF.

<A NAME='middleofpage'></A>

Vous pouvez ensuite modifier votre balise A HREF pour passer à «middleofpage» et exécuter le JavaScript dans l'événement OnClick, une fois que cela se produit comme suit:

<A HREF="#middleofpage" onclick="var elem = document.getElementById('foo');">Get the object</a>

Il y aura BEAUCOUP de fois où vous ne voulez pas que ce lien saute, vous pouvez donc faire deux choses:

<A HREF="#thislinkname" name='thislinkname' onclick="var elem = document.getElementById('foo');">Get the object</a>

Maintenant, il n'ira nulle part lorsque vous cliquerez dessus, mais cela pourrait entraîner un recentrage de la page à partir de sa fenêtre actuelle. Ce n'est pas joli. Quelle est la meilleure façon de fournir du javascript en ligne, en utilisant un A HREF, mais sans avoir à faire quoi que ce soit ci-dessus? JavaScript: void (0);

<A HREF="JavaScript:void(0);" onclick="var elem = document.getElementById('foo');">Get the object</a>

Cela indique au navigateur d'aller NULLE PART, mais d'exécuter à la place le code JavaScript valide: void (0); fonctionne d'abord dans la balise HREF car elle ne contient aucun espace et ne sera pas analysée en tant qu'URL. Il sera plutôt exécuté par le compilateur. VOID est un mot clé qui, lorsqu'il est fourni avec un périmètre de 0, renvoie UNDEFINED, qui n'utilise plus de ressources pour gérer une valeur de retour qui se produirait sans spécifier le 0 (il est plus convivial pour la gestion de la mémoire / les performances).

La prochaine chose qui se produit est l'exécution d'OnClick. La page ne bouge pas, rien ne se passe au niveau de l'affichage.


la source
+1 pour expliquer toutes les différentes façons dont une ancre comme celle-ci peut être gérée. Je suis cependant d'avis qu'un <a>élément doit toujours aller quelque part ; si c'est uniquement sur la page pour exécuter du javascript, alors a <button>devrait être utilisé à la place. L'utilisation <button>est à la fois plus sémantique et vous évite tout ce débat sur ce qu'il faut pirater dans une ancre href. Edit: ressemble à la réponse de @Ronnie Royston ci-dessous a déjà couvert cet argument.
Rabadash8820
1

JavaScript: URL à part; c'est là que void peut être utile pour écrire du code plus court.

var error1 = false,
    error2 = false,
    error3 = false;

function error1() {

  error1 = true;
}

function myFunction() {

  // You can easily return and call a function at once, if you don't care about myFunction's return value
  if (!someCondition1)
    return error1();

  // What if you want to set a value first?
  if (!someCondition2) {
    error2 = true;
    return
  }

  // Shortest way to return and set a value at once
  if (!someCondition3)
    return void(error3 = true);

  // More code goes here
}
Maciej Krawczyk
la source
Ce serait bien si les votants pouvaient au moins dire pourquoi ils avaient voté. Je sais que ce n'est pas sur le sujet de la question, mais je pense à toutes les personnes qui viennent ici des résultats de la recherche.
Maciej Krawczyk