Quelle est la différence entre les différentes méthodes pour mettre du code JavaScript dans un <a> ?

Question

J'ai vu les méthodes suivantes pour mettre du code JavaScript dans un fichier de type <a> étiquette :

function DoSomething() { ... return false; }

1. <a href="javascript:;" onClick="return DoSomething();">link</a>
2. <a href="javascript:DoSomething();">link</a>
3. <a href="javascript:void(0);" onClick="return DoSomething();">link</a>
4. <a href="#" onClick="return DoSomething();">link</a>

Je comprends l'idée d'essayer de mettre une URL valide au lieu d'un simple code JavaScript, juste au cas où l'utilisateur n'aurait pas activé JavaScript. Mais pour les besoins de cette discussion, je dois supposer que JavaScript est activé (ils ne peuvent pas se connecter sans).

Personnellement, j'aime l'option 2 car elle vous permet de voir ce qui va être exécuté, ce qui est particulièrement utile pour le débogage lorsque des paramètres sont passés à la fonction. Je l'ai utilisé assez souvent et je n'ai pas rencontré de problèmes de navigation.

J'ai lu que les gens recommandent 4, parce que cela donne à l'utilisateur un vrai lien à suivre, mais vraiment, # n'est pas "réel". Il n'ira absolument nulle part.

Y en a-t-il un qui n'est pas pris en charge ou qui est vraiment mauvais, lorsque vous savez que l'utilisateur a activé JavaScript ?

Question connexe : Href pour les liens JavaScript : "#" ou "javascript:void(0)" ? .

Answer 1

J'apprécie beaucoup L'article de Matt Kruse sur les meilleures pratiques Javascript . Dans ce document, il affirme que l'utilisation du href pour exécuter du code JavaScript est une mauvaise idée. Même si vous avez déclaré que vos utilisateurs doivent avoir JavaScript activé, il n'y a aucune raison pour que vous ne puissiez pas avoir une simple page HTML vers laquelle tous vos liens JavaScript peuvent pointer pour leur href au cas où quelqu'un désactiverait JavaScript après s'être connecté. Je vous encourage vivement à autoriser ce mécanisme de repli. Un tel mécanisme permettra de respecter les "meilleures pratiques" et d'atteindre votre objectif :

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>

Answer 2

Pourquoi faire ça alors que vous pouvez utiliser addEventListener / attachEvent ? S'il n'y a pas href -équivalente, n'utilisez pas une <a> utiliser un <button> et le styliser en conséquence.

Answer 3

Vous avez oublié une autre méthode :

5: <a href="#" id="myLink">Link</a>

Avec le code JavaScript :

document.getElementById('myLink').onclick = function() {
    // Do stuff.
};

Je ne peux pas me prononcer sur l'option qui bénéficie du meilleur support ou qui est sémantiquement la meilleure, mais je dirai simplement que je préfère de loin ce style parce qu'il sépare votre contenu de votre code JavaScript. Il permet de garder tout le code JavaScript ensemble, ce qui est beaucoup plus facile à maintenir (surtout si vous l'appliquez à de nombreux liens), et vous pouvez même le mettre dans un fichier externe qui peut ensuite être emballé pour réduire la taille des fichiers et mis en cache par les navigateurs clients.

Answer 4

<a href="#" onClick="DoSomething(); return false;">link</a>

Je vais faire ça, ou :

<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() {
    DoSomething();
    return false;
};

En fonction de la situation. Pour les applications plus importantes, la deuxième solution est la meilleure car elle permet de consolider le code de l'événement.

Answer 5

La méthode n° 2 présente une erreur de syntaxe dans FF3 et IE7. Je préfère les méthodes #1 et #3, car la #4 salit l'URI avec '#' bien qu'elle provoque moins de saisie... Évidemment, comme indiqué dans d'autres réponses, la meilleure solution est de séparer le html de la gestion des événements.