FR
RU
EN
ES
ZH
DE
PT
AR
HI
# ou javascript:void(0) : que choisir pour les liens JavaScript ? Explication complète avec code
\n\nBonjour, collègue développeur ! Si tu as déjà écrit des liens qui ne mènent pas à une nouvelle page mais exécutent du code JavaScript (par exemple, ouvrir une fenêtre modale, charger du contenu ou lancer une animation), tu as sûrement été confronté au dilemme : quelle valeur d'attribut href utiliser ? href="#" ou href="javascript:void(0)" ?
Cette question est un véritable hit sur Stack Overflow (des milliers de vues !), et ce n'est pas pour rien. Cela semble un détail, mais cela influence le comportement de la page : va-t-elle défiler vers le haut, un hash apparaîtra-t-il dans l'URL, cela fonctionnera-t-il sur les anciens navigateurs ? Penchons-nous une fois pour toutes sur la meilleure approche, et pourquoi la réponse « correcte » n'est pas si évidente.
\n\nLe problème : pourquoi changer le href ?
\n\nImagine : tu écris un bouton qui ouvre un menu :
\n\n<a href="#" onclick="openMenu(); return false;">Menu</a>Ou comme ceci :
\n\n<a href="javascript:void(0)" onclick="openMenu();">Menu</a>Les deux options « fonctionnent », mais chacune cache des surprises. Comparons-les selon des critères clés.
\n\nOption 1 : href="#" — un classique avec un piège
\n\n# est un lien vers le « haut » de la page. Si tu écris simplement <a href="#">, le navigateur fera défiler la page vers le haut. Pour éviter cela, il faut ajouter return false; dans le gestionnaire :
<a href="#" onclick="doSomething(); return false;">Cliquez-moi</a>Avantages :
\n- \n
- Accessibilité : le lien reste focusable (on peut naviguer avec Tab). \n
- Sémantique : pour les lecteurs d'écran, c'est toujours un lien (bien qu'il ne mène nulle part). \n
- Simplicité : facile à retenir, s'écrit rapidement. \n
Inconvénients :
\n- \n
- Défilement vers le haut : si on oublie
return false, l'utilisateur perd sa position. \n - Modification de l'URL : un
#est ajouté dans la barre d'adresse (parfois indésirable). \n - Historique du navigateur : une entrée est créée dans l'historique (le bouton « Précédent » mènera à la page « # » précédente). \n
Option 2 : href="javascript:void(0)" — un hack des temps anciens
\n\njavascript:void(0) est un pseudo-protocole JavaScript. Il indique au navigateur : « exécute le code void(0) et ne suis pas le lien ». void(0) retourne undefined, donc la page ne bouge pas.
<a href="javascript:void(0)" onclick="doSomething();">Cliquez-moi</a>Avantages :
\n- \n
- Ne fait pas défiler la page — pas besoin de
return false. \n - Ne modifie pas l'URL — aucun hash n'est ajouté. \n
Inconvénients :
\n- \n
- Problèmes d'accessibilité : certains anciens lecteurs d'écran peuvent « buter » sur
javascript:dans le href. \n - Violation des principes d'amélioration progressive : si l'utilisateur a désactivé JavaScript, le lien ne fonctionne pas (il mène à du vide). \n
- HTML invalide ? Formellement,
javascript:est un protocole non standard, mais les navigateurs le comprennent. Cependant, le validateur W3C peut signaler une erreur. \n - Débogage plus complexe : s'il y a une erreur dans le href, le navigateur peut se comporter de manière imprévisible. \n
