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


Voici deux méthodes de création d'un lien qui a pour seul but d'exécuter du code JavaScript. Quel est le meilleur, 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>

ou

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


3672


origine


Réponses:


j'utilise javascript:void(0).

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

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

Mais alors ils oublient d'utiliser return doSomething() dans l'onclick et juste utiliser doSomething().

Une deuxième raison pour éviter # est-ce que la finale return false; ne s'exécutera pas si la fonction appelée renvoie une erreur. Par conséquent, les développeurs doivent également se rappeler de gérer toute erreur de façon appropriée dans la fonction appelée.

Une troisième raison est qu'il y a des cas où le onclick La propriété d'événement est affectée dynamiquement. Je préfère être capable d'appeler une fonction ou de 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 ressemble à ceci:

onclick="someFunc.call(this)"

OU

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

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

Donc, si vous êtes un développeur seul, vous pouvez clairement faire votre propre choix, mais si vous travaillez en équipe, vous devez soit:

Utilisation href="#", assure-toi onclick contient toujours return false; à la fin, que toute fonction appelée ne jette pas une erreur et si vous attachez une fonction dynamiquement à la onclick propriété assurez-vous que, tout en ne jette pas une erreur, il retourne false.

OU

Utilisation href="javascript:void(0)"

La seconde est clairement beaucoup plus facile à communiquer.


2006



Ni.

Si vous pouvez avoir une URL réelle qui a du sens, utilisez-la comme HREF. L'onclick ne se déclenchera pas si quelqu'un clique 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 click appropriés.

Je me rends compte que ce n'est pas toujours possible, mais à mon avis, il devrait être recherché dans le développement de tout site Web public.

Check-out JavaScript discret et Amélioration progressive (les deux Wikipedia).


1198



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

  1. Il favorise la pratique du JavaScript envahissant - qui s'est avéré difficile à maintenir et difficile à mettre à l'échelle. Plus à ce sujet dans JavaScript discret.

  2. Vous passez votre temps à écrire un code incroyablement trop verbeux - ce qui a très peu (voire pas du tout) d'avantages pour votre code.

  3. Il y a maintenant des façons meilleures, plus faciles et plus maintenables et évolutives d'accomplir le résultat désiré.

La manière JavaScript discrète

Juste ne pas avoir href attribut du tout! Toute bonne réinitialisation CSS prendrait soin du style de curseur par défaut manquant, donc c'est un non-problème. Ensuite, joignez votre fonctionnalité JavaScript en utilisant les meilleures pratiques gracieuses et discrètes - qui sont plus faciles à maintenir car votre logique JavaScript reste en JavaScript, plutôt que dans votre balisage - ce qui est essentiel lorsque vous commencez à développer des applications JavaScript à grande échelle. composants et modèles blackboxés. Plus à ce sujet dans Architecture d'application JavaScript à grande échelle

Exemple de code simple

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Un blackboxed Backbone.js Exemple

Pour un exemple de composant Backbone.js évolutif, blackboxé - voir cet exemple de travail jsfiddle ici. Remarquez comment nous utilisons des pratiques JavaScript discrètes, et dans une petite quantité de code, un composant peut être répété plusieurs fois sur la page sans effets secondaires ou conflits entre les différentes instances de composant. Incroyable!

Remarques

  • Omettre le href attribut sur le a élément va rendre l'élément inaccessible en utilisant tab navigation par clé Si vous souhaitez que ces éléments soient accessibles via le tab clé, vous pouvez définir la tabindex attribut, ou utiliser button éléments à la place. Vous pouvez facilement styliser les éléments de bouton pour qu'ils ressemblent à des liens normaux, comme mentionné dans La réponse de Tracker1.

  • Omettre le href attribut sur le a élément provoquera Internet Explorer 6 et Internet Explorer 7 de ne pas prendre le a:hover style, c'est pourquoi nous avons ajouté une simple cale JavaScript pour y parvenir via a.hover au lieu. Ce qui est parfaitement correct, comme si vous n'aviez pas d'attribut href et pas de dégradation gracieuse, votre lien ne fonctionnera pas de toute façon - et vous aurez de plus gros problèmes à vous soucier.

  • Si vous souhaitez que votre action fonctionne toujours avec JavaScript désactivé, utilisez un a élément avec un href attribut qui va à une URL qui va effectuer l'action manuellement au lieu de via une requête Ajax ou quoi que ce soit devrait être le chemin à parcourir. Si vous faites cela, alors vous voulez vous assurer de faire un event.preventDefault() sur votre appel cliquez pour vous assurer que lorsque le bouton est cliqué, il ne suit pas le lien. Cette option est appelée dégradation gracieuse.


734



'#' ramènera l'utilisateur en haut de la page, donc je vais habituellement avec void(0).

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


281



Je voudrais honnêtement suggérer ni l'un ni l'autre. J'utiliserais un stylisé <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 relier par l'intermédiaire du manuscrit, n'utilisant pas le onclick attribut sur l'étiquette de l'élément. Le seul gotcha est l'effet de texte 3d de psuedo dans les IE plus anciens qui ne peuvent pas être désactivés.


Si vous DOIT 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.
  • Des appels de chargement erronés n'auront pas lieu, ou déclencheront d'autres événements basés sur un changement de hachage
  • La balise de hachage peut provoquer un comportement inattendu si le clic tombe (onclick jette), l'éviter à moins que ce soit un comportement approprié, et que vous souhaitiez changer l'historique de navigation.

NOTE: Vous pouvez remplacer le 0 avec une chaîne telle que javascript:void('Delete record 123') qui peut servir d'indicateur supplémentaire qui montrera ce que le clic fera réellement.


209



Le premier, idéalement avec un vrai lien à suivre dans le cas où l'utilisateur a JavaScript désactivé. Assurez-vous simplement de retourner false pour empêcher l'événement click de se déclencher si JavaScript est exécuté.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Si vous utilisez Angular2, cela fonctionne:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

Vois ici https://stackoverflow.com/a/45465728/2803344


128



Idéalement, vous feriez ceci:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Ou, mieux encore, vous auriez le lien d'action par défaut dans le HTML, et vous ajouteriez l'événement onclick à l'élément discrètement via JavaScript après les rendus DOM, assurant ainsi que si JavaScript n'est pas présent / utilisé vous ne le faites pas avoir des gestionnaires d'événements inutiles qui criblent votre code et potentiellement obscurcissent (ou du moins distraient) votre contenu réel.


90



Ni si vous me demandez;

Si votre "lien" a pour seul but d'exécuter du code JavaScript, il n'est pas considéré comme un lien; plutôt un morceau de texte avec une fonction JavaScript couplée à celui-ci. Je recommanderais d'utiliser un <span> tag avec un onclick handler attaché à elle et quelques CSS de base pour immiter un lien. Les liens sont faits pour la navigation, et si votre code JavaScript n'est pas pour la navigation, il ne devrait pas être un <a> marque.

Exemple:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>


86



En utilisant juste # fait des mouvements amusants, donc je recommanderais d'utiliser #self si vous souhaitez économiser sur les efforts de dactylographie JavaScript bla, bla,.


73