Quelle valeur "href" dois-je utiliser pour les liens JavaScript, "#" ou "javascript:void(0)" ?

Question

Voici deux méthodes pour créer un lien qui a pour seul but d'exécuter du code JavaScript. Laquelle est la meilleure, en termes de fonctionnalité, de vitesse de chargement des pages, de validation, etc.

function myJsFunc() {
    alert("myJsFunc");
}

<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

o

function myJsFunc() {
    alert("myJsFunc");
}

 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Answer 1

J'utilise javascript:void(0) .

Trois raisons. Encourager l'utilisation de # parmi une équipe de développeurs conduit inévitablement à ce que certains utilisent la valeur de retour de la fonction appelée comme ceci :

function doSomething() {
    //Some code
    return false;
}

Mais ensuite ils oublient d'utiliser return doSomething() dans l'onclick et utiliser simplement doSomething() .

Une deuxième raison d'éviter # est que la finale return false; ne s'exécutera pas si la fonction appelée déclenche une erreur. Par conséquent, les développeurs doivent également se souvenir de traiter toute erreur de manière appropriée dans la fonction appelée.

Une troisième raison est qu'il y a des cas où le onclick est attribuée dynamiquement. Je préfère pouvoir appeler une fonction ou l'assigner dynamiquement sans avoir à coder la fonction spécifiquement pour une méthode d'attachement ou une autre. D'où mon onclick (ou sur quoi que ce soit) dans le balisage HTML ressemblent à ceci :

onclick="someFunc.call(this)"

OU

onclick="someFunc.apply(this, arguments)"

Utilisation de javascript:void(0) évite tous les maux de tête ci-dessus, et je n'ai trouvé aucun exemple d'inconvénient.

Ainsi, si vous êtes un développeur solitaire, vous pouvez clairement faire votre propre choix, mais si vous travaillez en équipe, vous devez faire l'un ou l'autre :

Utilisez href="#" assurez-vous que onclick contient toujours return false; à la fin, que toute fonction appelée ne lève pas d'erreur et que si vous attachez une fonction dynamiquement à la balise onclick s'assure qu'en plus de ne pas lancer une erreur, elle renvoie false .

OU

Utilisez href="javascript:void(0)"

La seconde est clairement beaucoup plus facile à communiquer.

Answer 2

Ni l'un ni l'autre.

Si vous pouvez avoir une URL réelle qui a du sens, utilisez-la comme HREF. Le onclick ne se déclenchera pas si quelqu'un fait un clic moyen sur votre lien pour ouvrir un nouvel onglet ou si JavaScript est désactivé.

Si cela n'est pas possible, vous devez au moins injecter la balise d'ancrage dans le document avec JavaScript et les gestionnaires d'événements de clics appropriés.

Je sais que ce n'est pas toujours possible, mais à mon avis, il faut s'efforcer de le faire lors du développement de tout site Web public.

Vérifiez _JavaScript discret y Amélioration progressive_ (tous deux sur Wikipédia).

Answer 3

Faire <a href="#" onclick="myJsFunc();">Link</a> ou <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> ou tout autre chose qui contient un onclick de l'attribut était ok il y a cinq ans, mais maintenant, il peut être une mauvaise pratique. Voici pourquoi:

1. Elle favorise la pratique de la envahissante du JavaScript qui s'est avéré être difficile à maintenir et difficile à l'échelle. En savoir plus sur ce en JavaScript Discret.

2. Vous passez votre temps à écrire incroyablement trop verbeux code, qui a très peu (le cas échéant) de profiter de votre base de code.

3. Il y a maintenant plus facilement et plus maintenable et évolutive des moyens d'atteindre le résultat souhaité.

Le JavaScript discret manière

Il suffit de ne pas avoir un href d'attribut à tous! Tout bon CSS reset prendrait soin du manque de curseur par défaut de style, ce qui est un non-problème. Ensuite, fixez votre JavaScript fonctionnalités à l'aide gracieuse et discrète de meilleures pratiques, qui sont plus maintenable que votre logique JavaScript, des séjours en JavaScript, au lieu de dans votre balisage - ce qui est essentiel lorsque vous commencez à développer à grande échelle des applications JavaScript qui exigent votre logique, être divisée en blackboxed composants et des modèles. En savoir plus sur ce à Grande échelle JavaScript de l'Application Architecture)

Exemple de code Simple

Votre code HTML:

<a class="cancel-action">Cancel this action</a>

Votre CSS:

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

Votre JavaScript(à l'aide de jQuery):

// Cancel click event
$('.cancel-action').click(function(){

});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

Un blackboxed Backbone.js exemple

Pour une solution évolutive, blackboxed, Backbone.js composant exemple - voir ce travail jsfiddle exemple ici. Remarquez comment nous utilisons JavaScript discret pratiques, et dans une petite quantité de code d'un composant qui peut être répétée dans la page plusieurs fois, sans effets secondaires ou des conflits entre les différentes instances de composants. Incroyable!

Notes

• L'omission de la href l'attribut dans l' a élément sera la cause de l'élément à ne pas être accessible à l'aide d' tab touche de navigation. Si vous souhaitez pour les éléments accessibles via l' tab - clé, vous pouvez définir l' tabindex d'un attribut ou d'utiliser button éléments à la place. Vous pouvez facilement le style de bouton d'éléments pour ressembler à des liens normaux comme mentionné dans Tracker1 de réponse.

• L'omission de la href l'attribut dans l' a élément sera la cause d'Internet Explorer 6 et Internet Explorer 7 pour ne pas prendre sur l' a:hover style, c'est pourquoi nous avons ajouté un simple JavaScript cale pour accomplir ce par le biais d' a.hover à la place. Ce qui est parfaitement normal, comme si vous ne disposez pas d'un attribut href et pas de dégradation gracieuse alors votre lien ne fonctionne pas de toute façon - et vous vous avez plus de questions à se soucier.

• Si vous voulez que votre action à continuer à travailler avec le JavaScript désactivé, puis à l'aide d'un a élément avec un href attribut qui va vers une URL qui va effectuer l'action manuellement au lieu de via une requête Ajax ou ce que devrait être le chemin à parcourir. Si vous faites cela, alors vous voulez vous assurer que vous faire une event.preventDefault() sur votre sur appel pour assurez-vous que lorsque le bouton est cliqué, cela ne veut pas suivre le lien. Cette option est appelée la dégradation gracieuse.

Answer 4

'#' ramènera l'utilisateur en haut de la page, donc j'opte généralement pour void(0) .

javascript:; se comporte également comme javascript:void(0);

Answer 5

Honnêtement, je ne suggère ni l'un ni l'autre. J'utiliserais un stylisme <button></button> pour ce comportement.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}

<p>A button that looks like a <button type="button" class="link">link</button>.</p>

De cette façon, vous pouvez attribuer votre onclick. Je suggère également de lier via script, et non pas d'utiliser la fonction onclick de la balise de l'élément. Le seul problème est l'effet de texte en 3 dimensions dans les anciens IE qui ne peut être désactivé.

---

Si vous MUST utiliser un élément A, utiliser javascript:void(0); pour les raisons déjà mentionnées.

• Interceptera toujours au cas où votre événement onclick échoue.
• Il n'y aura pas d'appels de charge errants, ni de déclenchement d'autres événements en fonction d'un changement de hachage.
• La balise de hachage peut provoquer un comportement inattendu si le clic tombe à l'eau (lancements onclick), évitez-la sauf s'il s'agit d'un comportement de chute approprié et que vous souhaitez modifier l'historique de navigation.

REMARQUE : Vous pouvez remplacer le 0 avec une chaîne de caractères telle que javascript:void('Delete record 123') qui peut servir d'indicateur supplémentaire pour montrer ce que le clic va réellement faire.