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




onclick link (25)

S'il n'y en 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 repli (par exemple, une alternative href), ils devraient au moins ne pas pouvoir voir et interagir avec cet élément, qu'il s'agisse d' <a>une <span>balise ou d'une balise.

Voici deux méthodes pour créer 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 de page, 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>


Je paraphrase essentiellement de cet article pratique en utilisant l’amélioration progressive . La réponse courte est que vous n'utilisez jamais javascript:void(0);ou #que votre interface utilisateur a déjà déduit que JavaScript est activé, auquel cas vous devez utiliserjavascript:void(0); . Aussi, n'utilisez pas span comme liens, car c'est sémantiquement faux pour commencer.

L'utilisation d' itinéraires URL conviviaux pour le SEO dans votre application, tels que / Accueil / Action / Paramètres, est également une bonne pratique. Si vous avez un lien vers une page qui fonctionne sans JavaScript, vous pouvez améliorer l'expérience par la suite. 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 comportant une interface utilisateur et des boutons de soumission HTML standard, mais il semble plus joli 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 du 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>

Certainement le hachage ( # ) est préférable car en JavaScript c'est un pseudoscheme:

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

Bien sûr, "#" avec un gestionnaire onclick qui empêche les actions par défaut est bien meilleur. De plus, un lien qui a pour seul but d'exécuter JavaScript n'est pas vraiment "un lien" sauf si vous envoyez un utilisateur à une ancre judicieuse de la page (juste que # enverra en haut) lorsque quelque chose ne va pas. Vous pouvez simplement simuler l'apparence du lien avec la feuille de style et oublier complètement href.

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


Si vous utilisez AngularJS , vous pouvez utiliser les éléments suivants:

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

Ce qui ne fera rien.

en outre

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

J'utiliserais:

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

Les raisons:

  1. Cela rend le href simple, les moteurs de recherche en ont besoin. Si vous utilisez autre chose (telle qu'une chaîne), une erreur 404 not found générée.
  2. Lorsque la souris survole le lien, cela n’indique pas qu’il s’agit d’un script.
  3. En utilisant return false; , la page ne saute pas en haut ni ne casse le bouton de back .

Je dirais que le meilleur moyen est de créer une ancre href sur un identifiant que vous n'utiliseriez jamais, comme # Do1Not2Use3This4Id5 ou un identifiant similaire, et que vous êtes sûr à 100% que personne ne l'utilisera et ne choquera personne.

  1. Javascript:void(0)est une mauvaise idée et constitue une violation de la politique de sécurité du contenu des pages HTTPS activées pour CSP https://developer.mozilla.org/en/docs/Security/CSP (merci à @ jakub.g)
  2. En utilisant simplement #, l’utilisateur reviendra au sommet lorsque vous appuierez dessus.
  3. Si JavaScript n'est pas activé, il ne gâchera pas la page (sauf si le code de détection JavaScript est activé).
  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 (vous ne pouvez pas savoir si vous supprimez ce qui empêche le navigateur de sélectionner du texte)

Fondamentalement, personne n’a mentionné 5 dans cet article, ce qui est important, car votre site se révèle peu professionnel s'il commence soudainement à sélectionner des éléments autour du lien.


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é aux personnes qui parcourent 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é accéderont à une page appropriée (ou à un emplacement dans la même page) au lieu de simplement cliquer sur le lien et que rien ne se passera.


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

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

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

Le balisage de balise d'ancrage sera comme

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

Assez simple!


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

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


Le premier, idéalement avec un lien réel à suivre au cas où l'utilisateur aurait désactivé JavaScript. Assurez-vous simplement de renvoyer la valeur 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://.com/a/45465728/2803344


# est meilleur que javascript:anything , mais ce qui suit est encore meilleur:

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'obtenir une dégradation progressive (dans le cas où l'utilisateur n'a pas activé JavaScript ... et lorsqu'il s'agit de spécifications et d'un budget). En outre, l'utilisation d'attributs et de protocoles JavaScript directement en HTML est considérée comme une mauvaise forme.


Ainsi, lorsque vous utilisez JavaScript avec une balise <a /> et que vous mettez également href="#" , vous pouvez ajouter return false à la fin de l'événement (dans le cas d'une 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 y parvenir sont faux (cela fonctionne bien) . Si aucun élément n'est créé pour parcourir la page et que des éléments JavaScript lui sont associés, il ne doit pas s'agir d'une balise <a> .

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

Il existe donc un avantage à utiliser <a href="#"> . Vous obtenez le pointeur de curseur par défaut sur cet élément lorsque vous faites a href="#" . Pour cela, je pense que vous pouvez utiliser CSS pour cela comme un 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, vous pouvez y effectuer event.preventDefault() si vous utilisez la balise <a> , mais si vous n’utilisez pas de balise <a> pour ça, là tu as un avantage, tu n'as pas besoin de faire ça.

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


Utiliser seulement # fait des mouvements amusants, je vous recommande donc d'utiliser #self si vous souhaitez économiser sur les efforts de frappe de JavaScript bla, bla,


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

  1. Il favorise la pratique de JavaScript intrusif - qui s’est avéré difficile à maintenir et à faire évoluer. Plus d'informations à ce sujet dans JavaScript discret .

  2. Vous passez votre temps à écrire du code incroyablement excessif - ce qui présente très peu d'avantages (le cas échéant) pour votre base de code.

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

La manière JavaScript discrète

Juste ne pas avoir un attribut href du tout! Toute bonne réinitialisation de CSS prendrait en compte le style de curseur manquant par défaut, ce qui n’est pas un problème. Ensuite, attachez votre fonctionnalité JavaScript en appliquant les meilleures pratiques gracieuses et discrètes, qui sont plus faciles à gérer, car votre logique JavaScript reste dans JavaScript, et non dans votre balisage, ce qui est essentiel lorsque vous commencez à développer des applications JavaScript à grande échelle nécessitant une scission de votre logique. 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 de Backbone.js noire Backbone.js

Pour un exemple de composant Backbone.js évolutif et blackboxed - voir cet exemple de travail jsfiddle ici . Notez que nous utilisons des pratiques JavaScript non intrusives et que, dans une infime 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

  • Si vous omettez l'attribut href sur l'élément a, l'élément ne sera pas accessible à l'aide de tab navigation par touche de tab . Si vous souhaitez que ces éléments soient accessibles via la touche de tab , vous pouvez définir l'attribut tabindex ou utiliser plutôt des éléments de button . Vous pouvez facilement attribuer un style aux éléments de bouton afin qu'ils ressemblent à des liens normaux, comme indiqué dans la réponse de Tracker1 .

  • Si vous omettez l'attribut href sur l'élément a, Internet Explorer 6 et Internet Explorer 7 ne prendront pas le style a a:hover . C'est pourquoi nous avons ajouté une simple cale JavaScript pour accomplir cela via a.hover . Ce qui est parfaitement correct, car 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 a élément avec un attribut href qui renvoie à une URL qui effectuera l'action manuellement au lieu d'une requête Ajax ou de tout autre chemin à suivre. Si vous faites cela, alors vous voulez vous assurer de faire un event.preventDefault() sur votre appel de clic pour vous assurer que lorsque le bouton est cliqué, il ne suit pas le lien. Cette option est appelée dégradation progressive.


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 code HTML et vous ajouteriez l'événement onclick à l'élément de manière discrète via JavaScript après le rendu du DOM, garantissant ainsi que si JavaScript n'est pas présent / utilisé, vous ne le ferez pas. demandez à des gestionnaires d'événements inutiles de résoudre votre code et de dissimuler (ou du moins distraire) votre contenu réel.


N'utilisez pas de liens uniquement dans le but d'utiliser 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.

Au lieu de cela, utilisez un élément autre qu'un lien:

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

Et style avec CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

J'utilise le suivant

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

au lieu

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

Lorsque 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 balises de hachage sauf si elles sont utilisées pour des ancres, et je ne fais ce qui est mentionné ci-dessus que si j'ai plus de deux faux liens, sinon j'utilise javascript: void (0).

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

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


En règle générale, vous devez toujours avoir un lien de secours pour vous assurer que les clients avec JavaScript désactivé ont encore des fonctionnalités. Ce concept s'appelle 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 avec JavaScript désactivé sont dirigées vers search.phppendant que vos téléspectateurs avec JavaScript voient vos fonctionnalités améliorées.


En fonction de ce que vous voulez accomplir, vous pouvez oublier onclick et utiliser simplement le href:

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

Il évite le besoin de retourner false. Je n'aime pas cette #option parce que, comme mentionné, cela mènera l'utilisateur en haut de la page. Si vous avez un autre endroit à envoyer à l'utilisateur s'il n'a pas activé JavaScript (ce qui est rare lorsque je travaille, mais une très bonne idée), la méthode proposée par Steve fonctionne parfaitement.

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

Enfin, vous pouvez utiliser javascript:void(0)si vous ne voulez pas que quelqu'un aille n'importe où et si vous ne souhaitez pas appeler une fonction JavaScript. Cela fonctionne très bien si vous voulez une image survolée avec une image, mais l'utilisateur ne peut pas cliquer dessus.


Ni.

Si vous pouvez avoir une URL qui a du sens, utilisez-la comme HREF. 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 de clic appropriés.

Je réalise que ce n’est pas toujours possible, mais j’estime qu’il faudrait s’efforcer de développer tout site Web public.

Découvrez JavaScript discret et l' amélioration progressive (les deux Wikipédia).


Je vais habituellement pour

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

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


J'ai essayé les deux dans Google Chrome avec les outils de développement, et le id="#"pris en 0,32 secondes. 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.


J'utilise javascript:void(0) .

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

Une deuxième raison pour éviter # est que le résultat final est return false; ne sera pas exécuté si la fonction appelée génère 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 propriété d'événement onclick est affectée de manière dynamique. Je préfère pouvoir appeler une fonction ou l'affecter de manière dynamique sans avoir à coder la fonction spécifiquement pour une méthode de rattachement ou une autre. D'où mon onclick (ou sur n'importe quoi) dans le balisage 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'inconvénient.

Donc, si vous êtes un développeur isolé, vous pouvez clairement choisir vous-même, mais si vous travaillez en équipe, vous devez indiquer:

Utilisez href="#" , assurez-vous que onclick contient toujours return false; à la fin, toute fonction appelée ne génère pas d'erreur et si vous associez une fonction de manière dynamique à la propriété onclick , assurez-vous que, en plus de ne pas générer d'erreur, elle renvoie false .

OU

Utilisez href="javascript:void(0)"

Le second est clairement beaucoup plus facile à communiquer.


Navigateurs modernes seulement

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }
    doc.addEventListener('click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault();
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

Navigateur croisé

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var cb_addEventListener = function(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, false);
            return true;
        } 
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }

    cb_addEventListener(doc, 'click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

Vous pouvez exécuter ceci avant que le document soit prêt, cliquer sur les boutons fonctionnera parce que nous attachons l'événement au document.

Sources:







javascript html performance optimization href