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

Voici deux méthodes de création d'un lien dont le seul but est 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>

J'utilise javascript:void(0).

Trois raisons. Encourager l'utilisation de #parmi une équipe de développeurs conduit inévitablement à certains à utiliser 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 utilisent simplement doSomething().

Une deuxième raison pour éviter #est 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 correctement toute erreur dans la fonction appelée.

Une troisième raison est qu'il existe des cas où la onclickpropriété d'événement est affectée dynamiquement. Je préfère pouvoir appeler une fonction ou l'attribuer dynamiquement sans avoir à coder la fonction spécifiquement pour une méthode de connexion ou une autre. Par conséquent, mon onclick(ou n'importe quoi) dans le balisage HTML ressemble à ceci:

onclick="someFunc.call(this)"

OU

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

L'utilisation 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 isolé, vous pouvez clairement faire votre propre choix, mais si vous travaillez en équipe, vous devez indiquer:

Utilisez href="#", assurez-vous que onclickcontient toujours return false;à la fin, que toute fonction appelée ne onclickrenvoie pas d'erreur et si vous attachez une fonction dynamiquement à la propriété, assurez-vous qu'en plus de ne pas renvoyer d'erreur, elle retourne false.

OU

Utilisation href="javascript:void(0)"

La seconde est clairement beaucoup plus facile à communiquer.

Ni.

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 clique avec le bouton du milieu 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 clic appropriés.

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

Découvrez JavaScript discret et l' amélioration progressive (tous deux Wikipedia).

Faire <a href="#" onclick="myJsFunc();">Link</a> ou <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>ou quoi que ce soit d'autre qui contient un onclickattribut - c'était bien il y a cinq ans, bien que maintenant cela puisse être une mauvaise pratique. Voici pourquoi:

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

2. Vous passez votre temps à écrire du code incroyablement trop verbeux - ce qui a très peu (voire aucun) avantage pour votre base de code.

3. Il existe désormais des moyens meilleurs, plus faciles et plus faciles à maintenir et à adapter pour atteindre le résultat souhaité.

La manière discrète de JavaScript

N'ayez tout simplement pas d' hrefattribut du tout! Toute bonne réinitialisation CSS prendrait en charge le style de curseur par défaut manquant, donc ce n'est pas un problème. Ensuite, associez votre fonctionnalité JavaScript à l'aide de 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 qui nécessitent que votre logique soit divisée en composants et modèles en boîte noire. En savoir plus sur l' 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 exemple Backbone.js en boîte noire

Pour un exemple de composant évolutif, en boîte noire , Backbone.js - voir cet exemple de jsfiddle fonctionnel 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 ni conflits entre les différentes instances de composant. Incroyable!

Remarques

• L'omission de l' hrefattribut sur l' aélément rendra l'élément inaccessible à l'aide de la tabnavigation par clé. Si vous souhaitez que ces éléments soient accessibles via la tabclé, vous pouvez définir l' tabindexattribut ou utiliser des buttonéléments à la place. Vous pouvez facilement styliser les éléments des boutons pour qu'ils ressemblent à des liens normaux, comme mentionné dans la réponse de Tracker1 .

• L'omission de l' hrefattribut sur l' aélément empêchera Internet Explorer 6 et Internet Explorer 7 de prendre le a:hoverstyle, c'est pourquoi nous avons ajouté un simple cale JavaScript pour accomplir cela via a.hover. Ce qui est parfaitement correct, comme si vous n'avez pas d'attribut href et aucune dégradation gracieuse, votre lien ne fonctionnera pas de toute façon - et vous aurez de plus gros problèmes à vous inquiéter.

• Si vous souhaitez que votre action fonctionne toujours avec JavaScript désactivé, utilisez un aélément avec un hrefattribut qui va à une URL qui exécutera l'action manuellement plutôt que via une demande Ajax ou tout ce qui devrait être le chemin à parcourir. Si vous faites cela, vous devez vous assurer de faire un event.preventDefault()appel sur votre clic pour vous assurer que lorsque vous cliquez sur le bouton, il ne suit pas le lien. Cette option est appelée dégradation gracieuse.

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

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

Je ne dirais honnêtement 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 une liaison via un script, sans utiliser l' onclickattribut sur la balise element. Le seul problème est l'effet de texte psuedo 3d dans les anciens IE qui ne peuvent pas être désactivés.

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

• Interceptera toujours en cas d'échec de votre événement onclick.
• Aucun appel de charge errant ne se produira ou ne déclenchera d'autres événements en fonction d'un changement de hachage
• La balise de hachage peut provoquer un comportement inattendu si le clic échoue (lancers sur un clic), évitez-le sauf s'il s'agit d'un comportement de passage approprié et que vous souhaitez modifier l'historique de navigation.

REMARQUE: vous pouvez remplacer le 0par 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.

Le premier, idéalement avec un vrai lien à suivre au cas où l'utilisateur aurait désactivé JavaScript. Assurez-vous simplement de renvoyer false pour éviter que l'événement click ne se déclenche si JavaScript s'exécute.

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

Si vous utilisez Angular2, cette méthode fonctionne:

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

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

Ni si vous me le 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 qui lui est associée. Je recommanderais d'utiliser une <span>balise avec un onclick handlerattaché et quelques CSS de base pour imiter 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> balise.

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>

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 le rendu du DOM, garantissant ainsi que si JavaScript n'est pas présent / utilisé, vous ne l'avez pas ont des gestionnaires d'événements inutiles qui criblent votre code et peuvent obscurcir (ou du moins distraire) votre contenu réel.

L'utilisation ne #fait que des mouvements amusants, donc je recommanderais d'utiliser #selfsi vous souhaitez économiser sur les efforts de frappe de JavaScript bla, bla,.

J'utilise ce qui suit

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

au lieu

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

Je suis d'accord avec les suggestions ailleurs indiquant que vous devez utiliser une URL régulière dans l' hrefattribut, puis appeler une fonction JavaScript dans onclick. Le défaut est qu'ils ajoutent automatiquement return falseaprès l'appel.

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

Il existe une solution très simple. Laissez la fonction revenir truesi elle fonctionne correctement. Utilisez ensuite la valeur renvoyé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>

Notez que je nie le résultat de la doSomething()fonction. Si cela fonctionne, il reviendra true, il sera donc annulé ( false) et le path/to/some/URLne sera pas appelé. Si la fonction revient false(par exemple, le navigateur ne prend pas en charge quelque chose utilisé dans la fonction ou quoi que ce soit d'autre ne va pas), il est annulé trueet path/to/some/URLest appelé.

#est mieux que javascript:anything, mais ce qui suit 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 d'une dégradation gracieuse (dans le cas où l'utilisateur n'a pas activé JavaScript ... et quand il est avec les spécifications et le budget). En outre, il est considéré comme une mauvaise forme d'utiliser les attributs et le protocole JavaScript directement en HTML.

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

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

À moins que vous n'écriviez le lien en utilisant JavaScript (afin 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 onclick gestionnaire d'événements. De cette façon, ceux avec JavaScript activé exécuteront la fonction et ceux avec JavaScript désactivé passeront à une page appropriée (ou à un emplacement dans la même page) plutôt que de simplement cliquer sur le lien et que rien ne se passe.

Certainement, hash ( #) est mieux car en JavaScript c'est un pseudoscheme:

1. pollue l'histoire
2. instancie une nouvelle copie du moteur
3. s'exécute à l'échelle mondiale et ne respecte pas le système d'événements.

Bien sûr, "#" avec un gestionnaire onclick qui empêche l'action par défaut est [beaucoup] mieux. De plus, un lien qui a pour seul but d'exécuter JavaScript n'est pas vraiment "un lien" à moins que vous n'envoyiez l'utilisateur à une ancre sensible sur la page (juste # enverra en haut) quand quelque chose ne va pas. Vous pouvez simplement simuler l'apparence d'un lien avec une feuille de style et oublier le 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 elle ne fait pas de distinction entre les scénarios "JavaScript désactivé" et "onclick échoue".

Je vais d'habitude pour

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

Il est plus court que javascript: void (0) et fait de même.

J'utiliserais:

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

Les raisons:

1. Les hrefmoteurs de recherche en ont donc besoin. Si vous utilisez autre chose (comme une chaîne), cela peut provoquer une 404 not founderreur.
2. Lorsque la souris survole le lien, cela ne montre pas qu'il s'agit d'un script.
3. En utilisant return false;, la page ne saute pas vers le haut ou ne casse pas le backbouton.

Je choisis d'utiliser javascript:void(0), car cela pourrait empêcher un clic droit pour ouvrir le menu de contenu. Mais javascript:;est plus court et fait la même chose.

Donc, lorsque vous faites des choses JavaScript avec une <a />balise et si vous le mettez href="#"également, 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, toutes les façons ci-dessus pour y parvenir sont fausses (cela fonctionne bien cependant) . Si aucun élément n'est créé pour naviguer dans la page et auquel certains éléments JavaScript sont associés, il ne doit pas s'agir d'un élément<a> balise.

Vous pouvez simplement utiliser a à la <button />place pour faire des choses ou tout autre élément comme b, span ou tout ce qui vous convient, car vous êtes autorisé à ajouter des événements sur tous les éléments.

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

Et à la fin, si vous liez l'événement à partir du code JavaScript lui-même, vous pouvez le faire event.preventDefault()si vous utilisez une <a>balise, mais si vous n'utilisez pas de<a> balise pour cela, vous obtenez un avantage, vous ne le faites pas '' t besoin de le faire.

Donc, si vous voyez, il vaut mieux ne pas utiliser de balise pour ce genre de choses.

N'utilisez pas de liens dans le seul but d'exécuter JavaScript.

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

Utilisez plutôt un élément autre qu'un lien:

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

Et stylisez-le avec CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

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

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

et omettez les deux href="#"et href="javascript:void(0)".

Le balisage de la balise d'ancrage sera comme

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

Assez simple!

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

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

Ce qui ne fera rien.

en plus

• Cela ne vous mènera pas en haut de la page, comme avec (#)
  • Par conséquent, vous n'avez pas besoin de retourner explicitement falseavec JavaScript
• Il est court et concis

S'il n'y a pas, il n'y a hrefpeut-être aucune raison d'utiliser une balise d'ancrage.

Vous pouvez attacher des événements (clic, survol, etc.) sur presque tous les éléments, alors pourquoi ne pas simplement utiliser un spanou un div?

Et pour les utilisateurs avec JavaScript désactivé: s'il n'y a pas de solution de rechange (par exemple, une alternative href), ils ne devraient au moins pas être en mesure de voir et d'interagir avec cet élément, quel qu'il soit <a>ou une <span>balise.

Habituellement, vous devriez toujours avoir un lien de secours pour vous assurer que les clients avec JavaScript désactivé ont toujours certaines fonctionnalités. Ce concept est appelé JavaScript discret.

Exemple ... Disons que vous disposez du lien de recherche suivant:

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

Vous pouvez toujours effectuer les opérations suivantes:

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

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

De cette façon, les personnes avec JavaScript désactivé sont dirigées vers search.phptandis que vos téléspectateurs avec JavaScript voient votre fonctionnalité améliorée.

Je les utilise personnellement en combinaison. Par exemple:

HTML

<a href="#">Link</a>

avec un peu de jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

ou

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Mais je l'utilise juste pour empêcher la page de sauter vers le haut lorsque l'utilisateur clique sur une ancre vide. J'utilise rarement onClick et autreson événements directement en HTML.

Ma suggestion serait d'utiliser l' <span>élément avec l' classattribut au lieu d'une ancre. Par exemple:

<span class="link">Link</span>

Attribuez ensuite la fonction à .linkavec un script enveloppé dans le corps et juste avant la </body>balise ou dans un document JavaScript externe.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Remarque: pour les éléments créés dynamiquement, utilisez:

$('.link').on('click', function() {
    // do something
});

Et pour les éléments créés dynamiquement qui sont créés avec des éléments créés dynamiquement, utilisez:

$(document).on('click','.link', function() {
    // do something
});

Ensuite, vous pouvez styliser l'élément span pour qu'il ressemble à une ancre avec un peu de CSS:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Voici un exemple jsFiddle ci-dessus.

Selon ce que vous voulez accomplir, vous pouvez oublier le onclick et simplement utiliser le href:

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

Il contourne la nécessité de retourner faux. Je n'aime pas cette #option car, comme mentionné, elle amènera l'utilisateur en haut de la page. Si vous avez un autre endroit pour envoyer l'utilisateur si JavaScript n'est pas activé (ce qui est rare où je travaille, mais c'est une très bonne idée), 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 l'utiliser javascript:void(0)si vous ne voulez pas que quelqu'un aille n'importe où et si vous ne voulez pas appeler de fonction JavaScript. Cela fonctionne très bien si vous avez une image avec laquelle vous souhaitez qu'un événement survolant, mais il n'y a rien sur quoi l'utilisateur puisse cliquer.

Quand j'ai plusieurs faux-liens, je préfère leur donner une classe de «non-lien».

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 Hash-Tags sauf s'ils sont utilisés pour les ancres, et je ne fais ce qui précède que lorsque j'ai plus de deux faux-liens, sinon je choisis javascript: void (0).

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

En règle générale, j'aime simplement éviter d'utiliser un lien et simplement envelopper quelque chose dans un intervalle et l'utiliser comme un moyen d'activer du code JavaScript, comme une fenêtre contextuelle ou une révélation de contenu.

Je pense 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 la balise 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 légèrement différemment. Une <span>balise est beaucoup plus appropriée.

J'ai essayé les deux dans Google Chrome avec les outils de développement, et cela a id="#"pris 0,32 seconde. Alors que la javascript:void(0)méthode n'a pris que 0,18 secondes. Donc, dans Google Chrome, javascript:void(0)fonctionne mieux et plus rapidement.

Je paraphrase essentiellement 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 n'ait déjà déduit que JavaScript est activé, auquel cas vous devez utiliserjavascript:void(0); . En outre, n'utilisez pas span comme liens, car cela est sémantiquement faux pour commencer.

L'utilisation de routes URL optimisées pour le référencement dans votre application, telles que / Accueil / Action / Paramètres est également une bonne pratique. Si vous avez d'abord un lien vers une page qui fonctionne sans JavaScript, vous pouvez améliorer l'expérience par la suite. Utilisez un vrai lien vers une page de travail, puis ajoutez un événement onlick pour améliorer la présentation.

Voici un exemple. Accueil / ChangePicture est un lien de travail vers un formulaire sur une page complète avec une interface utilisateur et des boutons de soumission HTML standard, mais il semble plus joli injecté dans une boîte de dialogue modale avec des boutons jQueryUI. Dans les deux cas, cela fonctionne, selon le navigateur, ce qui satisfait le premier développement mobile.

<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>