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

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 ensuite ils oublient d'utiliser return doSomething() dans le onclick et juste utiliser doSomething() .

une deuxième raison pour éviter # est que le final return false; ne s'exécutera pas si l'appelé fonction lance une erreur. Par conséquent, les développeurs doivent également se rappeler de gérer toute erreur de manière appropriée dans la fonction appelée.

une troisième raison est qu'il y a des cas où la propriété de l'événement onclick est assigné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 de fixation ou une autre. D'où mon onclick (ou sur n'importe quoi) dans le markup HTML ressemble à ceci:

onclick="someFunc.call(this)"

ou

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

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

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

Utiliser href="#" , assurez-vous que 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 propriété onclick assurez-vous qu'en plus de ne pas lancer d'erreur, elle retourne false .

ou

Utiliser href="javascript:void(0)"

le second est clairement beaucoup plus facile à communiquer.

ni l'un ni l'autre.

si vous pouvez avoir une URL réelle qui a du sens, utilisez-la comme href. L'onclick ne se déclenche pas si quelqu'un clique au milieu de votre lien pour ouvrir un nouvel onglet ou si JavaScript est désactivé.

si cela n'est pas possible, alors vous devriez au moins injecter L'étiquette d'ancrage dans le document avec JavaScript et les gestionnaires de clic appropriés.

je me rends compte que ce n'est pas toujours possible, mais à mon avis il devrait être striven pour le développement de tout site web public.

Check out JavaScript discret et "Progressive enhancement (tous deux Wikipedia).

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

1. il promeut la pratique du JavaScript obstruant - qui s'est avéré difficile à maintenir et difficile à mettre à l'échelle. Plus d'informations à ce sujet dans unobtrusive JavaScript .

2. vous passez votre temps à écrire un code incroyablement verbeux - qui a très peu (s'il y en a) d'avantages à votre base de données.

3. il existe maintenant des moyens plus efficaces, plus faciles, plus faciles à entretenir et plus évolutifs d'atteindre le résultat souhaité.

Le JavaScript discret manière

N'ont tout simplement pas d'attribut href du tout! Tout bon reset CSS prendrait soin du style de curseur manquant par défaut, de sorte que c'est un non-problème. Ensuite, joignez votre fonctionnalité JavaScript en utilisant des pratiques exemplaires gracieuses et discrètes - qui sont plus faciles à maintenir car votre logique JavaScript reste en JavaScript, plutôt que dans votre markup - ce qui est essentiel lorsque vous commencez à développer des applications JavaScript à grande échelle qui exigent que votre logique soit divisée en composants et gabarits. En savoir plus sur ce sujet dans grande échelle Architecture D'Application JavaScript

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 l'épine Dorsale.js exemple

Pour une solution évolutive, blackboxed, de la colonne vertébrale.exemple de Composant js - voir cet exemple de Composant jsfiddle fonctionnel ici . Notez comment nous utilisons des pratiques JavaScript discrètes, et dans une petite quantité de code ont un composant qui peut être répété à travers la page plusieurs fois sans effets secondaires ou des conflits entre les différentes instances de Composant. Incroyable!

Notes

• L'omission de l'attribut href sur l'élément a empêchera l'accès à l'élément à l'aide de la touche de navigation tab . Si vous le souhaitez pour ces éléments doivent être accessibles via la touche tab , vous pouvez définir l'attribut tabindex , ou utiliser button éléments à la place. Vous pouvez facilement styliser des éléments de boutons pour ressembler à des liens normaux comme mentionné dans réponse de Tracker1 .

• omettant l'attribut href sur l'élément a causera Internet Explorer 6 et Internet Explorer 7 de ne pas adopter le style a:hover , c'est pourquoi nous avons ajouté un simple shim JavaScript pour accomplir cela via a.hover à la place. Ce qui est parfaitement correct, comme si vous n'aviez pas d'attribut href et aucune dégradation gracieuse alors votre lien ne fonctionnera pas de toute façon - et vous aurez de plus gros problèmes à vous soucier.

• si vous voulez que votre action de continuer à fonctionner avec JavaScript désactivé, puis en utilisant un a élément avec un attribut href qui va à une URL qui va effectuer l'action manuellement au lieu de via une requête Ajax ou quelque soit le chemin à suivre. Si vous faites cela, alors vous voulez vous assurer que vous faites un event.preventDefault() sur votre appel de clic pour s'assurer que lorsque le bouton est cliqué il ne suit pas le lien. Cette option est appelée dégradation gracieuse.

'#' va ramener l'utilisateur en haut de la page, donc je vais généralement avec void(0) .

javascript:; se comporte aussi comme javascript:void(0);

honnêtement, je ne dirais 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 assigner votre onclick. Je suggère également de lier via script, en n'utilisant pas l'attribut onclick sur la balise d'élément. Le seul gotcha est l'effet de texte 3d psuedo dans les systèmes plus anciens qui ne peuvent pas être désactivés.

si vous doit utilisez un élément A, utilisez javascript:void(0); pour les raisons déjà mentionnées.

• interceptera toujours en cas de défaillance de votre événement onclick.
• N'aura pas d'appel de charge errant se produire, ou déclencher d'autres événements basés sur un changement de hachage
• la balise de hachage peut causer un comportement inattendu si le clic tombe à travers (onclick jette), l'éviter à moins que ce soit un comportement de chute appropriée, et vous voulez changer le historique de la navigation.

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

le premier, idéalement avec un lien réel à suivre dans le cas où L'Utilisateur a Javascript désactivé. Assurez-vous simplement de retourner false pour empêcher l'événement de clic de s'allumer si le JavaScript exécute.

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

si vous utilisez Angular2, cette voie fonctionne:

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

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

Idéalement, vous feriez ceci:

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

ou, encore mieux, 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, s'assurant ainsi que si JavaScript n'est pas présent/utilisé vous n'avez pas de gestionnaires d'événements inutiles chevauchant votre code et potentiellement brouillant (ou au moins distrayant) votre contenu réel.

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; il s'agit plutôt d'un texte avec une fonction JavaScript couplée à celle-ci. Je recommande d'utiliser un <span> étiquette avec un onclick handler attaché à elle et quelques CSS de base pour immitate 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 une étiquette <a> .

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>

en utilisant juste # fait quelques mouvements drôles, donc je recommande d'utiliser #self si vous souhaitez économiser sur les efforts de Dactylographie de JavaScript bla, bla, .

j'utilise le suivant

<a href="javascript:;" onclick="myJsFunc();">Link</a>

au lieu de

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

je suis d'accord avec les suggestions ailleurs disant que vous devriez utiliser L'URL régulière dans l'attribut href , puis appeler une fonction JavaScript dans onclick. Le défaut est qu'ils ajoutent automatiquement return false après l'appel.

Le problème avec cette approche est que si la fonction ne fonctionne pas ou si il y aura un problème, le lien deviendra unclickable. L'événement Onclick retournera toujours false , donc L'URL normale ne sera pas appelée.

il y a une solution très simple. Laissez la fonction retourner true si elle fonctionne correctement. Ensuite, utilisez la valeur retournée pour déterminer si le clic doit être annulé ou non:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Note, que je nie le résultat de la fonction doSomething() . Si elle fonctionne, elle sera retourner true , ainsi il sera nié ( false ) et le path/to/some/URL ne sera pas appelé. Si la fonction retourne false (par exemple, le navigateur ne supporte pas quelque chose utilisé dans la fonction ou quelque chose d'autre va mal), il est nié à true et le path/to/some/URL est appelé.

# est mieux que javascript:anything , mais la suite est encore mieux:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

vous devez toujours vous efforcer pour la dégradation gracieuse (dans le cas où l'utilisateur n'a pas JavaScript activé...et quand il est avec les spécifications. et budget). En outre, il est considéré comme une mauvaise forme D'utiliser les attributs JavaScript et le protocole directement en HTML.

sauf si vous écrivez le lien En utilisant JavaScript (pour que vous sachiez qu'il est activé dans le navigateur), vous devriez idéalement fournir un lien approprié pour les personnes qui naviguent avec Javascript désactivé, puis empêcher l'action par défaut du lien dans votre gestionnaire d'événements onclick. De cette façon, ceux avec JavaScript activé exécutera la fonction et ceux avec JavaScript désactivé sautera à une page appropriée (ou l'emplacement dans la même page) plutôt que de simplement cliquer sur le lien et n'ayant rien arriver.

je recommande d'utiliser un élément <button> à la place, surtout si le contrôle est censé produire un changement dans les données. (Quelque chose comme un piquet.)

il est encore mieux si vous injectez les éléments discrètement, un type d'amélioration progressive. (Voir ce commentaire .)

certainement le hachage ( # ) est mieux parce que dans JavaScript c'est un pseudoscheme:

1. pollue l'histoire
2. instancie nouvelle copie de moteur
3. fonctionne dans la portée globale et ne respecte pas le système d'événements.

bien sûr "#" avec un onclick gestionnaire qui empêche l'action par défaut est [beaucoup de] mieux. En outre, un lien qui a pour seul but D'exécuter JavaScript n'est pas vraiment "un lien" à moins que vous envoyiez l'utilisateur à quelque ancre raisonnable sur la page (juste # enverra vers le haut) quand quelque chose va mal. Vous pouvez simplement de simuler l'apparence et la sensation de lien avec la feuille de style et oublier href.

en outre, en ce qui concerne la suggestion de cowgod, en particulier ceci: ...href="javascript_required.html" onclick="... C'est une bonne approche, mais il ne fait pas de distinction entre les scénarios" Javascript désactivé "et" onclick échoue".

j'ai l'habitude d'aller pour

<a href="javascript:;" onclick="yourFunction()">Link description</a>

c'est plus court que javascript:void(0) et fait la même chose.

j'utiliserais:

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

motifs:

1. cela rend le href simple, Les moteurs de recherche en ont besoin. Si vous utilisez autre chose ( comme une chaîne de caractères), cela peut causer une erreur 404 not found .
2. quand la souris survole le lien, elle ne montre pas qu'il s'agit d'un script.
3. en utilisant return false; , la page ne saute pas au sommet ou ne casse pas le back bouton.

je choisis d'utiliser javascript:void(0) , parce que cette utilisation pourrait empêcher le clic droit pour ouvrir le menu de contenu. Mais javascript:; est plus court et fait la même chose.

Ainsi, lorsque vous faites des choses JavaScript avec une étiquette <a /> et si vous mettez href="#" aussi, vous pouvez ajouter return false à la fin de l'événement (en cas de liaison d'événement en ligne) comme:

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

ou vous pouvez changer l'attribut href avec JavaScript comme:

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

ou

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

mais sémantiquement, tous les moyens ci-dessus pour atteindre ce sont faux (il fonctionne très bien si) . Si un élément n'est pas créé pour naviguer sur la page et que des éléments JavaScript y sont associés, il ne doit pas s'agir d'une balise <a> .

vous pouvez simplement utiliser un <button /> à la place de faire des choses ou tout autre élément comme b, span ou ce qui convient là comme selon votre besoin, parce que vous êtes autorisé à ajouter des événements sur tous les éléments.

, il y a un avantage utiliser <a href="#"> . Vous obtenez le pointeur du curseur par défaut sur cet élément lorsque vous faites a href="#" . Pour cela, je pense que vous pouvez utiliser CSS pour ce comme cursor:pointer; qui résout ce problème aussi.

et à la fin, si vous liez l'événement à partir du code JavaScript lui-même, là vous peut faire event.preventDefault() pour y arriver si vous utilisez <a> étiquette, mais si vous n'utilisez pas une <a> étiquette pour cela, là vous obtenez un avantage, vous n'avez pas besoin de faire cela.

donc, si vous voyez, il est préférable de ne pas utiliser une étiquette pour ce genre de choses.

, Il serait préférable d'utiliser jQuery,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

et omettre href="#" et href="javascript:void(0)" .

le markup de l'étiquette d'ancrage sera comme

<a onclick="hello()">Hello</a>

assez Simple!

N'utilisez pas de liens uniquement pour lancer JavaScript.

l'utilisation de href="# " défile la page vers le haut; l'utilisation de void(0) crée des problèmes de navigation dans le navigateur.

à la place, utilisez un élément autre qu'un lien:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

Et le style avec CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

si vous utilisez AngularJS , vous pouvez utiliser ce qui suit:

<a href="">Do some fancy JavaScript</a>

Qui ne fera rien.

en outre

• Il ne faudra pas vous en haut de la page, comme avec (#)
  • par conséquent, vous n'avez pas besoin de retourner explicitement false avec JavaScript
• il est court un concis

Si il n'y a pas de href peut-être qu'il n'y a pas de raison d'utiliser une balise d'ancrage.

vous pouvez joindre des événements (clic, hover, etc.) sur presque tous les éléments, alors pourquoi ne pas utiliser un span ou un div ?

et pour les utilisateurs avec JavaScript désactivé: s'il n'y a pas de repli (Par exemple, une alternative href ), ils devraient au moins ne pas être en mesure de voir et d'interagir avec cet élément du tout, quel que soit le <a> ou un <span> tag.

habituellement, vous devriez toujours avoir un lien de repli pour s'assurer que les clients avec Javascript désactivé a toujours une certaine fonctionnalité. Ce concept est appelé JavaScript discret.

exemple... Disons que vous avez le lien de recherche suivant:

<a href="search.php" id="searchLink">Search</a>

vous pouvez toujours faire ce qui suit:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

de cette façon, les personnes handicapées JavaScript sont dirigés vers search.php alors que vos téléspectateurs avec JavaScript visualisez votre fonctionnalité améliorée.

j'ai essayé à la fois dans google chrome avec les outils de développement, et le id="#" a pris 0,32 secondes. Alors que la méthode javascript:void(0) n'a pris que 0,18 seconde. Ainsi, dans google chrome, javascript:void(0) fonctionne mieux et plus rapidement.

selon ce que vous voulez accomplir, vous pouvez oublier le clic et juste utiliser le href:

<a href="javascript:myJsFunc()">Link Text</a>

ça évite le besoin de rendre false. Je n'aime pas l'option # parce que, comme mentionné, elle amènera l'utilisateur en haut de la page. Si vous avez un autre endroit où envoyer l'utilisateur s'ils n'ont pas JavaScript activé (ce qui est rare là où je travaille, mais une très bonne idée), alors la méthode proposée par Steve fonctionne très bien.

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

Enfin, vous pouvez utiliser javascript:void(0) si vous ne voulez pas que quiconque d'aller n'importe où et si vous ne souhaitez pas appeler une fonction JavaScript. Il fonctionne très bien si vous avez une image que vous voulez un événement mouseover pour se produire avec, mais il n'y a rien pour l'utilisateur à cliquer sur.

quand j'ai plusieurs faux-liens, je préfère leur donner une classe de "no-link".

puis dans jQuery, j'ajoute le code suivant:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

et pour le HTML, le lien est simplement

<a href="/" class="no-link">Faux-Link</a>

Je n'aime pas utiliser les étiquettes hachées à moins qu'elles ne soient utilisées pour les ancres, et je ne fais ce qui précède que lorsque j'ai plus de deux faux-liens, sinon je vais avec javascript:void(0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

Typiquement, j'aime juste éviter d'utiliser un lien du tout et juste envelopper quelque chose dans une portée et l'utiliser comme un moyen d'activer un code JavaScript, comme un pop-up ou un contenu-reveal.

je crois que vous présentez une fausse dichotomie. Ce ne sont pas les deux seules options.

je suis d'accord avec M. D4V360 qui a suggéré que, même si vous utilisez l'étiquette d'ancrage, vous n'avez pas vraiment d'ancre ici. Tout ce que vous avez est une section spéciale d'un document qui devrait se comporter un peu différemment. Une étiquette <span> est beaucoup plus appropriée.

Je paraphrase fondamentalement de cet article pratique en utilisant l'amélioration progressive . la réponse courte est que vous n'utilisez jamais javascript:void(0); ou # à moins que votre interface utilisateur ait déjà inféré que JavaScript est activé, auquel cas vous devez utiliser javascript:void(0); . Aussi, n'utilisez pas l'envergure des liens, puisque c'est sémantiquement faux pour commencer.

Using SEO friendly URL les routes de votre application, telles que /Home/Action / Parameters, sont également une bonne pratique. Si vous avez un lien vers une page qui fonctionne sans JavaScript, vous pouvez améliorer l'expérience après. Utilisez un lien réel vers une page de travail, puis ajoutez un événement onlick pour améliorer la présentation.

voici un échantillon. Home / ChangePicture est un lien fonctionnel vers un formulaire sur une page complète avec l'interface utilisateur et les boutons HTML soumettre standard, mais il semble plus agréable injecté dans un dialogue modal avec des boutons jQueryUI. Dans les deux cas fonctionne, en fonction du navigateur, qui satisfait mobile premier développement.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>

je dirais que le meilleur moyen est de faire un point d'ancrage href à un ID que vous n'utiliseriez jamais, comme #Do1Not2Use3This4Id5 ou un ID similaire, que vous êtes sûr à 100% que personne n'utilisera et ne choquera personne.

1. Javascript:void(0) est une mauvaise idée et viole la Politique de sécurité du contenu sur les pages HTTPS activées par CSP https://developer.mozilla.org/en/docs/Security/CSP (merci à @jakub.g)
2. en utilisant juste # aura le saut de l'utilisateur retour vers le haut lorsqu'il est pressé
3. ne ruinera pas la page si JavaScript n'est pas activé (sauf si vous avez le code de détection JavaScript
4. si JavaScript est activé, vous pouvez désactiver l'événement par défaut
5. vous devez utiliser href à moins que vous ne sachiez comment empêcher votre navigateur de sélectionner du texte, (ne sait pas si l'utilisation de 4 va supprimer la chose qui empêche le navigateur de sélectionner du texte)

mentionné 5 dans cet article qui je pense est important car votre site se présente comme non professionnel si elle commence soudainement à sélectionner des choses autour du lien.