javascript - link - onclick lien href




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

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>


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.


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


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.


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!


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.


J'utilise le suivant

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

au lieu

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

Je recommande d'utiliser un élément <button> place, surtout si le contrôle est supposé 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 .)


Je suggérerais honnêtement ni l'un ni l'autre. J'utiliserais un <button></button> stylisé 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 la liaison via un script, en n'utilisant pas l'attribut onclick de la balise element. L'effet de texte 3D psuedo dans les anciens IE qui ne peuvent pas être désactivés est l'unique solution.

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

  • Interceptera toujours en cas d'échec de votre événement onclick.
  • Il n'y aura pas d'appels de charge erronés, ni de déclenchement d'autres événements basés sur un changement de hachage
  • La balise de hachage peut provoquer un comportement inattendu si le clic passe au travers (onclick jette), évitez-le sauf s'il s'agit d'un comportement au travers approprié et si vous souhaitez modifier l'historique de navigation.

REMARQUE: vous pouvez remplacer le 0 par une chaîne telle que javascript:void('Delete record 123') qui peut servir d'indicateur supplémentaire indiquant le résultat réel du clic.


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.


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


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


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.


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


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

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


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.


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.


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.


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.


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>

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.





href