Que signifie" JavaScript:void(0)"?

en plus de la réponse technique, javascript:void signifie que l'auteur le fait mal.

il n'y a pas de bonne raison d'utiliser un pseudo-URL javascript: (*). En pratique, cela créera de la confusion ou des erreurs si quelqu'un essaie des choses comme "bookmark link", "open link in a new tab", et ainsi de suite. Cela arrive assez beaucoup de gens ont utilisé au moyen-clic-pour-le-nouvel-onglet: il ressemble à un lien, vous voulez le lire dans un nouvel onglet, mais il se révèle être pas un vrai lien du tout, et donne des résultats non désirés comme une page blanche ou une erreur JS quand milieu-cliqué.

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

dans certains cas, il peut y avoir un endroit utile pour pointer le lien vers. Par exemple, si vous avez un contrôle, vous pouvez cliquer sur cela ouvre un <div id="foo"> caché auparavant , il est logique d'utiliser <a href="#foo"> pour le lier. Ou s'il y a une façon non-JavaScript de faire la même chose (par exemple, ‘thispage.le php?show=foo’ qui définit foo visible pour commencer), vous pouvez le lier.

Sinon, si un lien pointe seulement vers un script, ce n'est pas vraiment un lien et ne devrait pas être marqué comme tel. L'approche habituelle à ajouter le onclick à un <span> , <div> , ou un <a> sans href et le style en quelque sorte pour le rendre clair, vous pouvez cliquer sur elle. C'est ce que StackOverflow [faisait au moment de l'écriture; maintenant il utilise href="#" ].

l'inconvénient de ceci est que vous perdez le contrôle de clavier, puisque vous ne pouvez pas tabuler sur un span/div/bare-a ou l'activer avec l'espace. La question de savoir s'il s'agit réellement d'un désavantage dépend du type d'action que l'élément est censé prendre. Vous pouvez, avec un certain effort, essayer d'imiter le possibilité d'interagir avec le clavier en ajoutant un tabIndex à l'élément et en écoutant une touche Espace. Mais il ne va jamais à 100% reproduire le comportement réel du navigateur, notamment parce que différents navigateurs peuvent répondre au clavier différemment (sans compter les 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"> est tout aussi bon, pour contenu textuel simple). Vous pouvez toujours utiliser CSS pour le reformuler de sorte qu'il ressemble plus à un lien qu'à un bouton, si vous voulez. Mais depuis, il se comporte comme un bouton, c'est comment, vraiment, vous devriez marquer.

(*: dans la création du site, de toute façon. Évidemment, ils sont utiles pour les bookmarklets. javascript: les pseudo-URLs 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 causé la sécurité problèmes pour les navigateurs et webapps, et ne devrait jamais avoir été inventé par Netscape.)

ça veut dire qu'il ne fera rien. C'est une tentative pour que le lien ne "navigue" nulle part. Mais ce n'est pas de la bonne façon.

vous devriez en fait juste return false dans le onclick événement, comme ainsi:

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

typiquement, il est utilisé si le lien fait quelque chose ‘JavaScript-y’ chose. Comme poster un formulaire AJAX, ou échanger une image, ou autre. Dans ce cas, vous faites juste n'importe quelle fonction s'appelle le retour false .

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

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

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

"#" défile dans le HAUT de la page tandis que " javascript: void (0);" ne l'est pas.

C'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 sur la page.

il est utilisé très populairement pour ajouter des fonctions JavaScript au lien HTML, par exemple: le lien [Print] que vous voyez sur de nombreuses pages web. Le Code est comme:

<a href="javascript:void(0)" onclick="call print function">Print</a>

Pourquoi avons-nous besoin de 'href' , alors que 'onclick' seul peut faire le travail? Parce que si nous omettons le 'href' , lorsque les utilisateurs cliquent sur le texte "Imprimer" le curseur va passer à "I". Avoir 'href' permet au curseur de s'afficher comme s'il s'agissait d'un lien hypertexte: une main de pointage.

PS: il y a deux méthodes: 1. href="javascript:void(0);" et 2. href="#" - les deux ont le même effet. Mais le premier exige que JavaScript soit activé dans le navigateur web tandis que le second ne l'est pas. Le second semble donc plus compatible.

vous devriez toujours avoir un href sur vos étiquettes a . Appeler une fonction JavaScript qui retourne 'undefined' fera l'affaire. Il en sera de lier le '#'.

balises d'Ancrage dans Internet Explorer 6, sans un href, ne reçoivent pas le a:hover style appliqué.

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

j'espère que cela aidera.

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

void est un opérateur qui est utilisé pour retourner une valeur undefined de sorte que le navigateur ne sera pas en mesure de charger une nouvelle page.

les navigateurs Web vont essayer de prendre tout ce qui est utilisé comme URL et le charger à 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>

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

une chose importante à noter au sujet de l'opérateur de vide est qu'il nécessite une valeur et ne peut pas être utilisé par lui-même. Nous devrions l'utiliser comme ceci:

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

l'opérateur void évalue l'expression donnée, puis renvoie une valeur non définie. Cela évite de rafraîchir la page.

il est intéressant de mentionner que vous verrez parfois vide 0 lors de la vérification de non dé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 les méthodes non définies par le vide 0 pour cette raison.

Usage de javascript:void(0) signifie que l'auteur du HTML utilise mal l'élément anchor à la place de l'élément button.

les tags D'ancrage sont souvent abusés avec l'événement onclick pour créer pseudo-boutons en réglant href à " # "ou" javascript: void (0)" à empêchez la page de se rafraîchir. Ces valeurs causent des comportement lors de la copie / du déplacement de liens, l'ouverture de liens dans un nouveau onglets / fenêtres, bookmarking, et quand JavaScript est encore télécharger, des erreurs, ou s'il est désactivé. Cela traduit également une mauvaise sémantique à technologies d'aide (p. ex., lecteurs d'écran). Dans ces cas, il est recommandé d'utiliser un <button> à la place. En général, vous ne devriez utiliser une ancre pour la navigation à L'aide d'une URL appropriée.

Source: MDN's <a> Page .

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 retourne non défini.

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

function myVoid(expr) {
    return undefined;
}

cet opérateur de vide a un usage important qui est de rejeter le résultat d'une expression.

Dans certaines situations, il est important de retourner indéfini par opposition au résultat d'une expression. Puis vide peut être utilisé pour rejeter ce résultat. Une telle situation implique javascript: URLs, qui devrait être évitée pour les liens, mais sont utiles pour bookmarklets. Lorsque vous visitez l'une de ces URLs, de nombreux navigateurs remplacent le document en cours avec le résultat de l'évaluation des URLs "content", mais seulement si le résultat n'est pas indéfini. Par conséquent, si vous voulez ouvrir une nouvelle fenêtre sans changer le contenu actuellement affiché, vous pouvez faire ce qui suit:

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

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

la plupart des navigateurs ne parsèment pas JavaScript avancé dans un

<A HREF="" 

étiquette telle que:

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

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

donc si vous voulez utiliser une balise A HREF pour exécuter JavaScript en ligne, vous devez spécifier une valeur valide pour HREF d'abord qui n'est pas trop complexe (ne contient pas d'espace blanc), 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 très bien, mais il fait le saut de la page vers le haut en raison de la fourrière signe / étiquette de hachage le dit faire.

il suffit de fournir un signe pound/étiquette hash dans une étiquette A HREF spécifie en fait l'ancre racine, qui est toujours, par défaut le haut de la page, vous pouvez spécifier un emplacement différent en utilisant l'attribut NAME à l'intérieur d'une étiquette a href.

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

vous pouvez alors changer votre étiquette A HREF pour passer à 'middleofpage' et exécuter le JavaScript dans L'événement OnClick, une fois que cela se produit comme ceci:

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

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

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

maintenant il n'ira nulle part quand cliqué, mais il pourrait faire que la page se re-centre de lui-même de son viewport courant. Ce n'est pas assez. Quelle est la meilleure façon de fournir javascript en ligne, en utilisant un A HREF, mais sans avoir à faire tout ce qui précède? JavaScript: void (0);

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

cela dit au navigateur D'aller nulle part, mais à la place exécutez le JavaScript valide: void (0); la fonction d'abord dans la balise HREF parce qu'elle ne contient pas d'espace, et ne sera pas analysée comme une URL. Il va plutôt être exécuté par le compilateur. NULL est un mot-clé qui, lorsqu'il est fourni avec un peramètre de 0 retourne non défini, qui n'utilise pas plus de ressources pour gérer une valeur de retour qui se produirait sans spécifier le 0 (Il est plus de gestion de la mémoire/facile de performance).

la prochaine chose qui se produit est L'OnClick obtient exécuter. La page ne bouge pas, rien n'arrive du point de vue de l'affichage.

JavaScript: URLs mis à part; c'est là que NULL 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
}

les développeurs Web utilisent javascript:void(0) parce que c'est le moyen le plus facile de prévenir le comportement par défaut de la balise a . void(*anything*) renvoie undefined et c'est une valeur falsy. et retourner une valeur falsy est comme return false dans onclick événement de "étiquette 151910920" qui empêchent son comportement par défaut.

donc je pense que javascript:void(0) est la façon la plus simple de prévenir le comportement par défaut de la balise a .

un autre exemple où est utilisé javascript.void(0) . Je ne suis pas sûr si c'est la bonne façon, mais fait le travail

$(document).ready(function() {
  jQuery(".show-hide-detail").hide();
  jQuery(".show-hide-detail:first").show();
  jQuery(".show-hide-btn a").click(function() {
    var thid_data = jQuery(this).attr('data-id');
    jQuery(".show-hide-btn a").removeClass('active');
    jQuery(this).addClass('active');
    if (!jQuery("#" + thid_data).is(":visible")) {
      jQuery(".show-hide-detail").hide();
      jQuery("#" + thid_data).show();
    }
  });
});

<section>
  <div class="features">
    <div class="container">
      <h1>Room Dimensions</h1>
      <p class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor arcu non ligula convallis, vel tincidunt ipsum posuere.sollicitudin. Duis iaculis, arcu ut hendrerit pharetra, elit augue pulvinar magna
      </p>
      <div class="dimension-btn show-hide-btn">
        <a class="active" data-id="LivingRoom">Living Room</a>
        <a href="javascript:void(0)" data-id="DiningRoom">Dining Room</a>
        <a href="javascript:void(0)" data-id="Kitchen">Kitchen</a>
        <a href="javascript:void(0)" data-id="MasterBedroom">Master Bedroom</a>
        <a href="javascript:void(0)" data-id="Bedroom2">Bedroom 2</a>
        <a href="javascript:void(0)" data-id="Bedroom3">Bedroom 3</a>
        <a href="javascript:void(0)" data-id="Bathroom">Bathroom</a>
        <a href="javascript:void(0)" data-id="Gym">Gym</a>
        <a href="javascript:void(0)" data-id="SwimmingPool">Swimming Pool</a>
      </div>
      <div class="row">
        <div class="LivingRoom Dimension-detail show-hide-detail" id="LivingRoom" style="display: block;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="DiningRoom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Kitchen" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="MasterBedroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom2" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom3" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bathroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="SwimmingPool" style="display: none;"></div>
        </div>
      </div>
    </div>



</section>