Que signifie "javascript: void (0)"?

Question

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

J'ai vu de tels hrefs plusieurs fois, mais je ne sais pas ce que cela signifie exactement.

Answer 1

L'opérateur void évalue l'expression donnée, puis renvoie undefined.

L'opérateur void est souvent utilisé simplement pour obtenir la valeur primitive undefined, généralement à l'aide de "void(0)" (équivalent à "void 0"). Dans ces cas, la variable globale undefined peut être utilisée à la place (en supposant qu'elle n'ait pas été affectée à une valeur autre que celle par défaut).

Une explication est fournie ici: opérateur void .

Si vous souhaitez effectuer cette opération avec le lien href, c’est que normalement, une URL javascript: redirige le navigateur vers une version en texte brut du résultat de l’évaluation de ce code JavaScript. Mais si le résultat est undefined, le navigateur reste sur la même page. void(0) n'est qu'un script court et simple dont le résultat est undefined.

Answer 2

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

Il n'y a pas de bonne raison d'utiliser une pseudo-URL javascript: (*). En pratique, cela créerait de la confusion ou des erreurs si quelqu'un essayait des choses comme "lien du signet", "lien ouvert dans un nouvel onglet", etc. Cela arrive assez souvent maintenant que les gens se sont habitués au clic-milieu-pour-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 blanche ou une erreur JS lorsque vous cliquez dessus.

<a href="#"> est une alternative courante qui pourrait être moins mauvaise. Cependant, vous devez vous souvenir de return false à partir de votre gestionnaire d'événements onclick pour empêcher le lien d'être suivi et de faire défiler l'écran jusqu'en haut de la page.

Dans certains cas, il peut y avoir un endroit utile où pointer le lien. Par exemple, si vous avez un contrôle sur lequel vous pouvez cliquer et qui ouvre un <div id="foo"> précédemment masqué, il est logique d'utiliser <a href="#foo"> pour le lier. Ou bien, s'il existe un moyen 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 ne pointe que vers un script, il ne s'agit pas vraiment d'un lien et ne doit pas être marqué comme tel. L’approche habituelle consisterait à ajouter la onclick à un <span>, <div> ou à un <a> sans href et à le styler d’une manière ou d’une autre. clair, 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 activer un span/div/bare-a ou l'activer avec de l'espace. Que cela soit réellement un inconvénient dépend du type d'action que l'élément est censé entreprendre. Vous pouvez, avec quelques efforts, essayer de reproduire l’interactivité du clavier en ajoutant un élément tabIndex à l’élément et en écoutant une pression sur la touche Espace. Mais il ne pourra jamais reproduire à 100% le comportement réel du navigateur, notamment parce que différents navigateurs peuvent réagir différemment au clavier (sans parler des navigateurs non visuels).

Si vous voulez vraiment un élément qui ne soit pas un lien mais qui puisse être activé normalement avec la souris ou le clavier, vous voulez un <button type="button"> (ou <input type="button"> est tout aussi bon, pour un contenu textuel simple. ). Vous pouvez toujours utiliser CSS pour redessiner le style afin qu'il ressemble davantage à un lien qu'à un bouton, si vous le souhaitez. Mais comme il se comporte comme un bouton, c’est comme ça que vous devriez le marquer.

(*: dans la création de sites, en tout cas. Évidemment, ils sont utiles pour les bookmarklets. javascript: les pseudo-URL sont une bizarrerie conceptuelle: un localisateur qui ne pointe pas vers un emplacement, mais appelle à la place le code actif à l’emplacement actuel. Ils ont causé d’énormes problèmes de sécurité pour les navigateurs et les applications Web, et n’auraient jamais dû être inventés par Netscape.)

Answer 3

Cela signifie que ça ne fera rien. C’est une tentative pour que le lien ne "navigue" pas. Mais ce n’est pas la bonne façon.

En fait, vous devriez simplement return false dans l'événement onclick, comme suit:

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

Généralement, il est utilisé si le lien fait quelque chose de "JavaScript-y". C'est comme poster un formulaire AJAX, ou échanger une image, ou autre chose. Dans ce cas, vous créez simplement la fonction appelée return false.

Toutefois, pour rendre votre site Web tout à fait génial, vous allez généralement inclure un lien qui fait la même chose, si la personne qui le navigue choisit de ne pas utiliser JavaScript.

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

Answer 4

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

"#" vous fait défiler en haut de la page avec "javascript: void (0);" ne fait pas.

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

Answer 5

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

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

Pourquoi avons-nous besoin de href alors que onclick seul peut faire le travail? Parce que lorsque les utilisateurs survolent le texte "Imprimer" lorsqu'il n'y a pas de href, le curseur se transforme en un curseur (ꕯ) au lieu d'un pointeur (). N'avoir que href sur une balise a le valide en tant qu'hyperlien.

Une alternative à href="javascript:void(0);" consiste à utiliser href="#". Cette alternative ne nécessite pas l'activation de JavaScript dans le navigateur de l'utilisateur, il est donc davantage compatible.

Answer 6

Vous devriez toujours avoir un href sur vos tags a. L'appel d'une fonction JavaScript qui retourne 'undefined' fera l'affaire. Il en va de même pour la liaison avec '#'.

Les balises d'ancrage dans Internet Explorer 6 sans href ne reçoivent pas le style a:hover.

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

J'espère que ça aide.

Internet Explorer 6 est en réalité un crime majeur contre l’humanité.

Answer 7

Il est à noter que vous verrez parfois vide 0 lorsque vous recherchez un indéfini, tout simplement parce qu'il nécessite moins de caractères.

Par exemple:

something === undefined

vs.

something === void 0

Certaines méthodes de minification remplacent indéfini par vide 0 pour cette raison.

Answer 8

void est un opérateur utilisé pour renvoyer une valeur undefined afin que le navigateur ne puisse pas charger une nouvelle page.

Les navigateurs Web essaieront de prendre tout ce qui est utilisé en tant qu'URL et de le charger sauf s'il s'agit d'une fonction JavaScript qui renvoie la valeur 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, car alert est une fonction qui renvoie une valeur null. 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 de vide est qu'il nécessite une valeur et ne peut pas être utilisé seul. Nous devrions l'utiliser comme ceci:

<a href="javascript: void(0)">I am a useless link</a>

Answer 9

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

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

Si vous implémentez void en tant que fonction, il se présente comme suit:

function myVoid(expr) {
    return undefined;
}

Cet opérateur vide a un usage important qui consiste à: ignorer le résultat d'une expression.

Dans certaines situations, il est important de renvoyer non défini, par opposition au résultat d'une expression. Void peut alors être utilisé pour ignorer ce résultat. Une de ces situations implique javascript: les URL, qui devraient être évitées pour les liens, mais 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 procéder comme suit:

javascript:void window.open("http://example.com/")

Answer 10

L'opérateur void évalue l'expression donnée, puis renvoie undefined. Cela évite d'actualiser la page.

Answer 11

L'utilisation de javascript:void(0) signifie que l'auteur du code HTML utilise de manière abusive l'élément d'ancrage à la place de l'élément button.

Les balises d'ancrage sont souvent utilisées avec l'événement onclick pour créer des pseudo-boutons en définissant href sur "#" ou "javascript: void (0)" pour empêcher l'actualisation de la page. Ces valeurs entraînent un comportement inattendu lors de la copie/glissement 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, que des erreurs sont supprimées 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 plutôt un <button>. En règle générale, vous ne devez utiliser une ancre que pour la navigation à l'aide d'une URL appropriée.

Source: <a> Page du MDN .

Answer 12

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 code JavaScript avancé dans une

<A HREF="" 

balises telles que:

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

parce que la balise HREF dans la plupart des navigateurs ne permet pas les espaces, ou convertira les espaces en% 20, l'équivalent HEX d'un ESPACE, ce qui rend votre JavaScript absolument inutile pour l'interprète.

Par conséquent, si vous souhaitez utiliser une balise A HREF pour exécuter du code JavaScript intégré, vous devez spécifier une valeur valide pour HREF FIRST qui ne soit pas trop complexe (ne contient pas d'espaces), puis fournir le code 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 la page passe en haut à cause du signe dièse/balise de hachage qui lui dit de le faire.

Le simple fait de fournir une balise dièse/signe dièse dans une balise A HREF spécifie en réalité l’ancre racine, qui est toujours, par défaut, le haut de la page, vous pouvez spécifier un emplacement différent en spécifiant l’attribut NAME dans une balise A HREF.

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

Vous pouvez ensuite changer votre balise A HREF pour accéder à 'middleofpage' et exécuter le code JavaScript dans l'événement OnClick, une fois que cela se produit de la manière suivante:

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

Il y aura BEAUCOUP de fois où vous ne voudrez 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>

À présent, le clic n'ira nulle part, mais la page pourrait se recentrer d'elle-même à partir de la fenêtre d'affichage 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); fonction en premier dans la balise HREF car elle ne contient aucun espace et ne sera pas analysée comme une URL. Au lieu de cela, il sera exécuté par le compilateur. VOID est un mot clé qui, lorsqu'il est fourni avec un paramètre égal à 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 passe est le OnClick est exécuté. La page ne bouge pas, rien ne se passe en mode d'affichage.

Answer 13

Les développeurs Web utilisent javascript:void(0) parce que c'est le moyen le plus simple d'éviter le comportement par défaut de la balise a. void(*anything*) retourne undefined et il s'agit d'une valeur de fausseté. et renvoyer une valeur de fausseté est comme return false dans onclick événement de la balise a qui empêche son comportement par défaut.

Je pense donc que javascript:void(0) est le moyen le plus simple d'éviter le comportement par défaut de la balise a.

Answer 14

JavaScript: URL de côté; c'est là que void peut être utile pour écrire un 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
}