Quelle valeur "href" dois-je utiliser pour les liens JavaScript, "#" ou "javascript: void (0)"?
Vous trouverez ci-dessous deux méthodes permettant de créer un lien ayant pour seul objectif 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>J'utilise javascript:void(0).
Trois raisons Encourager l'utilisation de # au sein d'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 le clic et il suffit d'utiliser doSomething().
Une deuxième raison d'éviter # est que le dernier 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)"
OR
onclick="someFunc.apply(this, arguments)"
Utiliser 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, que toute fonction appelée ne génère pas d'erreur et si vous attachez une fonction dynamiquement à la propriété onclick En plus de ne pas générer d'erreur, il retourne false.
OR
Utiliser href="javascript:void(0)"
La seconde est clairement beaucoup plus facile à communiquer.
Ni.
Si vous pouvez avoir une URL réelle, utilisez-la en tant que 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.
Check out JavaScript discret et Amélioration progressive (les deux Wikipédia).
Faire <a href="#" onclick="myJsFunc();">Link</a> ou <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> ou quoi que ce soit qui contient un attribut onclick - c'était bien il y a cinq ans, bien que cela puisse maintenant être une mauvaise pratique. Voici pourquoi:
Il favorise la pratique du JavaScript intrusif - qui s’est avéré difficile à maintenir et à faire évoluer. Plus à ce sujet dans JavaScript discret.
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.
Il existe maintenant des moyens plus efficaces, plus faciles à entretenir et plus évolutifs pour atteindre le résultat souhaité.
La méthode JavaScript discrète
N'ayez tout simplement pas d'attribut href! 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 qui nécessitent de scinder votre logique. composants et modèles en boîte noire. Plus d'informations à 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 exemple de blackboxed Backbone.js
Pour un exemple de composant Backbone.js évolutif, 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
hrefsur l'élémenta, l'élément ne sera pas accessible à l'aide de la touchetab. Si vous souhaitez que ces éléments soient accessibles via la touchetab, vous pouvez définir l'attributtabindexou utiliser plutôt les élémentsbutton. Vous pouvez facilement attribuer un style aux éléments de bouton qui ressemblent à des liens normaux, comme indiqué dans réponse de Tracker1.Si vous omettez l'attribut
hrefsur l'élémenta, Internet Explorer 6 et Internet Explorer 7 ne prennent pas le stylea:hoverC’est pourquoi nous avons ajouté une simple cale JavaScript pour y parvenir viaa.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 un élément
aavec un attributhrefqui renvoie à une URL qui effectuera l'action manuellement au lieu d'une requête Ajax ou quoi que ce soit d'autre. le chemin à parcourir. Si vous faites cela, alors vous voulez vous assurer de faire unevent.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.
'#' ramènera l'utilisateur en haut de la page, donc je vais généralement avec void(0).
javascript:; se comporte aussi comme javascript:void(0);
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 les 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.
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>.
Ni si vous me demandez;
Si votre "lien" a pour seul objectif d'exécuter du code JavaScript, il ne s'agit pas d'un lien. plutôt un morceau de texte avec une fonction JavaScript qui lui est associée. Je recommanderais d'utiliser une balise <span> avec un onclick handler attaché à celle-ci 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 s'agir d'une balise <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>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.
Utiliser seulement # fait des mouvements amusants, je vous recommande donc 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
<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>
Je suis d’accord avec les suggestions faites ailleurs, selon lesquelles vous devriez utiliser une URL ordinaire dans l’attribut href, puis appeler une fonction JavaScript dans onclick. Le problème 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 s'il y a un problème, le lien deviendra cliquable. L'événement Onclick retournera toujours false, ainsi l'URL normale ne sera pas appelée.
Il y a une solution très simple. Laisser la fonction retourner true si 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 fonction doSomething(). Si cela fonctionne, il retournera true, ainsi il sera annulé (false) et le path/to/some/URL ne sera pas appelé. Si la fonction retourne false (par exemple, le navigateur ne prend pas en charge quelque chose utilisé dans la fonction ou si quelque chose ne va pas), il est annulé en true et le path/to/some/URL est appelé. .
# 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.
Je recommande d'utiliser plutôt un élément <button>, , en particulier si le contrôle est censé produire une modification des 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 .)
Sauf si vous écrivez le lien en utilisant JavaScript (pour que vous sachiez que c'est activé dans le navigateur), vous devriez idéalement fournir un lien approprié pour les 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.
Certainement le hachage (#) est préférable car en JavaScript c'est un pseudoscheme:
- pollue l'histoire
- instancie une nouvelle copie du moteur
- fonctionne dans la 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 dont le seul but est d'exécuter JavaScript n'est pas vraiment "un lien" sauf si vous envoyez un utilisateur à une ancre judicieuse de la page (juste # 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, en particulier ceci: ...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".
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'utiliserais:
<a href="#" onclick="myJsFunc();return false;">Link</a>
Raisons:
- Cela rend la
hrefsimple, les moteurs de recherche en ont besoin. Si vous utilisez autre chose (une chaîne, par exemple), une erreur404 not foundrisque de se produire. - Lorsque la souris survole le lien, cela n’indique pas qu’il s’agit d’un script.
- En utilisant
return false;, la page ne saute pas au sommet ni ne rompt la toucheback.
Je choisis d'utiliser javascript:void(0), car cela pourrait empêcher un clic droit pour ouvrir le menu contenu. Mais javascript:; est plus court et fait la même chose.
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 (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>
o
<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>
Mais sémantiquement, tous les moyens ci-dessus pour y parvenir sont incorrects (cela fonctionne bien cependant) . 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 /> à la place pour faire des choses ou tout autre élément comme b, span ou tout ce qui vous convient, selon votre besoin, car vous êtes autorisé à ajouter des événements à tous les éléments.
Donc, il y a 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 cursor: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 y effectuer event.preventDefault() si vous utilisez la balise <a>, mais si vous n’utilisez pas un <a> tag pour cela, vous obtenez un avantage, vous n’avez pas besoin de le faire.
Donc, si vous voyez, il vaut mieux ne pas utiliser une balise pour ce genre de choses.
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;
}
Il serait préférable d'utiliser jQuery,
$(document).ready(function() {
$("a").css("cursor", "pointer");
});
et omettez à la fois href="#" et href="javascript:void(0)".
Le balisage de balise d'ancrage sera comme
<a onclick="hello()">Hello</a>
Assez simple!
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
- Par conséquent, vous n'avez pas besoin de retourner explicitement
- C'est court un concis
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.php alors que vos lecteurs avec JavaScript affichent vos fonctionnalités améliorées.
S'il n'y a pas de href, il n'y a peut-ê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 utiliser simplement 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 ne devraient au moins pas être en mesure de voir et d'interagir avec cet élément, quel que soit l'élément <a> ou une balise <span>.
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 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 balise <span> est beaucoup plus appropriée.
J'ai essayé les deux dans google chrome avec les outils de développement, et le id="#" prenait 0,32 seconde. Alors que la méthode javascript:void(0) ne prenait que 0,18 seconde. Donc, dans Google Chrome, javascript:void(0) fonctionne mieux et plus rapidement.
En fonction de ce que vous souhaitez accomplir, vous pouvez oublier onclick et utiliser simplement le href:
<a href="javascript:myJsFunc()">Link Text</a>
Cela évite le besoin de retourner false. Je n'aime pas l'option # parce que, comme mentionné, cela amènera l'utilisateur en haut de la page. Si vous avez un autre endroit à envoyer à l'utilisateur s'il ne possède pas JavaScript activé (ce qui est rare lorsque je travaille, mais 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 utiliser javascript:void(0) si vous ne souhaitez pas que quiconque aille ailleurs et si vous ne souhaitez pas appeler une fonction JavaScript. Cela fonctionne très bien si vous souhaitez une image survolée avec une image, mais l'utilisateur ne peut pas cliquer dessus.
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 à moins qu'elles ne soient utilisées pour des ancres, et je ne fais ce qui est mentionné ci-dessus que lorsque 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.
Personnellement, je les utilise 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 j'utilise cela uniquement pour empêcher la page de sauter en haut lorsque l'utilisateur clique sur une ancre vide. J'utilise rarement onClick et d'autres événements on directement en HTML.
Ma suggestion serait d'utiliser l'élément <span> avec l'attribut class au lieu d'une ancre. Par exemple:
<span class="link">Link</span>
Attribuez ensuite la fonction à .link avec un script enveloppé dans le corps et juste avant la balise </body> 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 avec des éléments créés dynamiquement, utilisez:
$(document).on('click','.link', function() {
// do something
});
Ensuite, vous pouvez attribuer à l'élément span l'apparence d'une ancre avec un peu de CSS:
.link {
color: #0000ee;
text-decoration: underline;
cursor: pointer;
}
.link:active {
color: red;
}
Voici n jsFiddle exemple de ci-dessus.
Je paraphrase fondamentalement de cet article pratique utilisant l’amélioration progressive . La réponse courte est que vous n'utilisez jamais javascript:void(0); ou # sauf si votre interface utilisateur a déjà déduit que JavaScript est activé, auquel cas vous devez utiliser javascript:void(0);. Aussi, n'utilisez pas span comme liens, car c'est sémantiquement faux pour commencer.
L'utilisation de SEO des itinéraires d'URL conviviaux dans votre application, tels que/Home/Action/Parameters 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>
Vous pouvez également écrire un indice dans une ancre comme celle-ci:
<a href="javascript:void('open popup image')" onclick="return f()">...</a>
de sorte que l'utilisateur saura ce que ce lien fait.
Je dirais que le meilleur moyen est de créer une ancre href avec 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 n'offusquera pas les gens.
Javascript:void(0)est une mauvaise idée et enfreint la politique de sécurité du contenu sur les pages HTTPS activées pour CSP https://developer.mozilla.org/en/docs/Security/CSP (merci à @jakub. g)- En utilisant seulement
#, l’utilisateur reviendra au sommet lorsque vous appuierez dessus - Si JavaScript n'est pas activé, il ne gâchera pas la page (à moins que le code de détection JavaScript ne soit activé).
- Si JavaScript est activé, vous pouvez désactiver l'événement par défaut.
- 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)
En gros, personne n’a mentionné 5 dans cet article, ce qui me semble important, car votre site se révèle peu professionnel s'il commence soudainement à sélectionner des éléments autour du lien.
Il est agréable que votre site soit accessible aux utilisateurs avec JavaScript désactivé, auquel cas le href pointe vers une page qui exécute la même action que le JavaScript en cours d'exécution. Sinon, j'utilise " # " avec un "return false;" pour empêcher l'action par défaut (défilement vers le haut de la page) comme d'autres l'ont mentionné. .
Googler pour "javascript:void(0)" fournit beaucoup d'informations sur ce sujet. Certains d'entre eux, comme celui-ci mentionnent les raisons pour NE PAS utiliser void (0) .
Je vois beaucoup de réponses de personnes qui veulent continuer à utiliser # valeurs pour href, par conséquent, voici une réponse satisfaisante pour les deux camps:
A) Je suis heureux d'avoir javascript:void(0) comme valeur href:
<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>
B) J'utilise jQuery et je veux # comme valeur href:
<a href="#" onclick="someFunc.call(this)">Link Text</a>
<script type="text/javascript">
/* Stop page jumping when javascript links are clicked.
Only select links where the href value is a #. */
$('a[href="#"]').live("click", function(e) {
return false; // prevent default click action from happening!
e.preventDefault(); // same thing as above
});
</script>
Notez que si vous savez que les liens ne seront pas créés dynamiquement, utilisez plutôt la fonction click:
$('a[href="#"]').click(function(e) {
Sur un site Web moderne, l’utilisation de href doit être évitée si l’élément utilise uniquement la fonctionnalité JavaScript (et non un lien réel).
Pourquoi? La présence de cet élément indique au navigateur qu'il s'agit d'un lien avec une destination. Avec cela, le navigateur affiche la fonction Ouvrir dans un nouvel onglet/fenêtre (également déclenchée lorsque vous utilisez les touches Maj + clic). Cela entraînerait l'ouverture de la même page sans que la fonction souhaitée ne soit déclenchée (ce qui entraînerait une frustration de la part de l'utilisateur).
En ce qui concerne IE: à partir de IE8, le style d'élément (y compris le survol) fonctionne si le doctype est défini. Les autres versions de IE ne sont plus vraiment à craindre.
Seul inconvénient: la suppression de HREF supprime le tabindex. Pour résoudre ce problème, vous pouvez utiliser un bouton stylé en tant que lien ou ajouter un attribut tabindex à l'aide de JS.
Il y a une autre chose importante à retenir ici. article 508 conformité. À cause de cela, j'estime qu'il est nécessaire de souligner que vous avez besoin de la balise d'ancrage pour les lecteurs d'écran tels que JAWS pour pouvoir la focaliser par tabulation. Donc, la solution "il suffit d'utiliser JavaScript et d'oublier l'ancre pour commencer" n'est pas une option pour certains de cela. Activer le code JavaScript à l'intérieur de la href n'est nécessaire que si vous ne pouvez pas vous permettre que l'écran revienne au sommet. Vous pouvez utiliser un settimeout pendant 0 secondes et faire activer le code JavaScript à l'endroit où vous devez vous concentrer, mais même l'apage sautera au sommet puis à l'arrière.
J'utilise href = "#" pour les liens pour lesquels je veux un comportement factice. Ensuite, j'utilise ce code:
$(document).ready(function() {
$("a[href='#']").click(function(event) {
event.preventDefault();
});
});
Cela signifie que si href est égal à un hachage (* = "#"), il empêche le comportement du lien par défaut, ce qui vous permet tout de même d'écrire des fonctionnalités et n'affecte pas les clics d'ancrage.
Juste pour reprendre le point que certains ont mentionné.
Il vaut bien mieux lier l'événement 'onload'a ou $ (' document '). Ready {}; puis mettre JavaScript directement dans l'événement click.
Dans le cas où JavaScript n'est pas disponible, j'utiliserais un href pour l'URL actuelle et peut-être une ancre pour la position du lien. La page est toujours utilisable pour les personnes sans JavaScript. Ceux qui en ont ne remarqueront aucune différence.
Comme je l'ai sous la main, voici quelques jQuery qui pourraient aider:
var [functionName] = function() {
// do something
};
jQuery("[link id or other selector]").bind("click", [functionName]);
Ce que je comprends de vos mots, c'est que vous voulez créer un lien juste pour exécuter du code JavaScript.
Ensuite, vous devriez considérer qu'il y a des personnes qui bloquent JavaScript dans leurs navigateurs.
Donc, si vous allez vraiment utiliser ce lien uniquement pour exécuter une fonction JavaScript, vous devez l'ajouter de manière dynamique afin de ne pas voir si les utilisateurs n'activent pas leur JavaScript dans le navigateur et si vous utilisez ce lien uniquement pour déclencher une fonction JavaScript qui n'a aucun sens d'utiliser un lien comme celui-ci lorsque JavaScript est désactivé dans le navigateur.
Pour cette raison, aucun d'entre eux n'est bon lorsque JavaScript est désactivé.
Si JavaScript est activé et que vous souhaitez uniquement utiliser ce lien pour appeler une fonction JavaScript,
<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>
est bien mieux que d'utiliser
<a href="#" onclick="myJsFunc();">Link</a>
parce que href = "#" va amener la page à faire des actions inutiles.
De plus, une autre raison pour laquelle <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> est supérieure à <a href="#" onclick="myJsFunc();">Link</a> est que JavaScript est utilisé comme langage de script par défaut pour la plupart des navigateurs. Par exemple, Internet Explorer utilise un attribut onclick pour définir le type de langage de script à utiliser. JavaScript sera utilisé par défaut par Internet Explorer, mais si un autre langage de script utilisait javascript:, il laisserait Internet Explorer comprendre quel langage de script est utilisé.
Compte tenu de cela, je préférerais utiliser et exercer sur
<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>
assez pour en faire une habitude et pour être plus convivial, ajoutez ce type de liens dans le code JavaScript:
$(document).ready(function(){
$(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')
});
Vous pouvez utiliser le href et supprimer tous les liens qui ont seulement des hachages:
HTML:
<a href="#" onclick="run_foo()"> foo </a>
JS:
$(document).ready(function(){ // on DOM ready or some other event
$('a[href=#]').attr('href',''); // set all reference handles to blank strings
// for anchors that have only hashes
});
Pourquoi ne pas utiliser cela? Cela ne fait pas défiler la page vers le haut.
<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>
Idéalement, vous devriez avoir une vraie URL comme solution de secours pour les utilisateurs non-JavaScript.
Si cela n’a aucun sens, utilisez # comme attribut href. Je n'aime pas utiliser l'attribut onclick puisqu'il incorpore JavaScript directement dans le code HTML. Une meilleure idée serait d’utiliser un fichier JS externe, puis d’ajouter le gestionnaire d’événements à ce lien. Vous pouvez ensuite empêcher l'événement par défaut de sorte que l'URL ne change pas et ajoute le # après que l'utilisateur a cliqué dessus.
En accord total avec le sentiment général, utilisez void(0) lorsque vous en avez besoin, et utilisez une URL valide lorsque vous en avez besoin.
En utilisant réécriture d'URL , vous pouvez créer des URL qui font non seulement ce que vous voulez faire avec JavaScript désactivé, mais vous indiquent également exactement ce que cela va faire.
<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>
Côté serveur, il vous suffit d'analyser l'URL et la chaîne de requête et de faire ce que vous voulez. Si vous êtes malin, vous pouvez autoriser le script côté serveur à répondre différemment aux requêtes Ajax et standard. Vous permettant d'avoir un code centralisé concis qui gère tous les liens de votre page.
Avantages
- S'affiche dans la barre d'état
- Facilement mis à niveau vers Ajax via le gestionnaire onclick en JavaScript
- Se commente pratiquement
- Empêche vos répertoires de devenir encombrés de fichiers HTML à usage unique
Les inconvénients
- Doit toujours utiliser event.preventDefault () en JavaScript
- Gestion des chemins d'accès et analyse des URL assez complexes côté serveur.
Je suis sûr qu'il y a des tonnes d'autres inconvénients. N'hésitez pas à en discuter.
Si vous utilisez un élément <a>, utilisez simplement ceci:
<a href="javascript:myJSFunc();" />myLink</a>
Personnellement, j’attacherai plus tard un gestionnaire d’événements avec JavaScript (en utilisant attachEvent ou addEventListener ou peut-être <insérez votre structure JavaScript préférée ici> également).
Ne perdez pas de vue le fait que votre URL peut être nécessaire - onclick est déclenché avant que la référence ne soit suivie. Vous devrez donc parfois traiter quelque chose côté client avant de naviguer hors de la page.
Si vous utilisez un lien comme moyen de juste exécuter du code JavaScript (au lieu d'utiliser une étendue telle que D4V360 fortement suggérée), faites simplement:
<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>
Si vous utilisez un lien avec onclick pour la navigation, n'utilisez pas href = "#" comme solution de secours lorsque JavaScript est désactivé. Il est généralement très agaçant lorsque l'utilisateur clique sur le lien. Si possible, fournissez le même lien que le gestionnaire onclick. Si vous ne pouvez pas faire cela, ignorez onclick et utilisez simplement un URI JavaScript dans le href.
Je préfère fortement éviter autant que possible mon code JavaScript dans mon code HTML. Si j'utilise <a> en tant que gestionnaires d'événements de clic, je vous recommande d'utiliser <a class="trigger" href="#">Click me!</a>.
$('.trigger').click(function (e) {
e.preventDefault();
// Do stuff...
});
Il est très important de noter que de nombreux développeurs pensent qu'il n'est pas bon d'utiliser des balises d'ancrage pour les gestionnaires d'événements de clic. Ils préféreraient que vous utilisiez un <span> ou <div> avec un code CSS qui y ajoute cursor: pointer;. C'est une question si beaucoup de débat.
Vous ne devriez pas utiliser inline onclick="something();" dans votre code HTML pour ne pas le polluer avec du code sans signification; toutes les liaisons par clic doivent être définies dans des fichiers Javascript (* .js).
Définissez la liaison comme ceci: $('#myAnchor').click(function(){... **return false**;}); ou $('#myAnchor').bind('click', function(){... **return false**;});
Ensuite, vous avez un fichier HTML propre facile à charger (et convivial) sans milliers de href="javascript:void(0);" et seulement href="#"
Voici une autre option par souci d'exhaustivité, qui empêche le lien de faire quoi que ce soit même si JavaScript est désactivé, et c'est court :)
<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>
Si l'identifiant n'est pas présent sur la page, le lien ne fera rien.
En général, je suis d’accord avec la réponse d’Aaron Wagner, le lien JavaScript devrait être injecté avec du code JavaScript dans le document.
• Javascript: void(0); est invalide avec une valeur nulle [Non attribué], ce qui signifie que votre navigateur va accéder à NULL cliquez sur DOM, et fenêtre retour à false.
• Le '#' ne suit pas le DOM ou la fenêtre en javascript. ce qui signifie que le signe '#' à l'intérieur de l'ancre href est un LIEN. Lien vers la même direction actuelle.
Édité en 2019 janvier
Dans HTML5, utiliser un élément sans attribut href est valide. Il est considéré comme un "lien hypertexte fictif"
Si l'élément a n'a pas d'attribut href, l'élément représente un espace réservé pour l'endroit où un lien aurait autrement été placé, s'il avait été pertinent, constitué uniquement du contenu de l'élément.
Exemple:
<a>previous</a>
Si après cela vous voulez faire autrement:
1 - Si votre lien ne va nulle part, n'utilisez pas d'élément <a>. Utilisez un <span> ou un autre moyen approprié, puis ajoutez CSS :hover pour le styler à votre guise.
2 - Utilisez la javascript:void(0) OR javascript:undefined OR javascript:; si vous voulez être brut, précis et rapide.
Vous pouvez utiliser javascript: void (0) ici au lieu de # pour arrêter la redirection des balises d'ancrage vers la section d'en-tête.
function helloFunction() {
alert("hello world");
}
<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>
Le plus simple et le plus utilisé par tout le monde est le plus souvent javascript: void (0) Vous pouvez l'utiliser au lieu d'utiliser # pour arrêter tag redirection vers la section d'en-tête =.
<a href="javascript:void(0)" onclick="testFunction();">Click To check Function</a>
function testFunction() {
alert("hello world");
}