La meilleure méthode pour exécuter une fonction javascript dans un lien HTML

Après avoir essayé divers façons d’exécuter une fonction Javascript dans un lien HTML pour un menu dynamique dans un de mes sites, afin d’afficher des sous-catégories, je me suis rendu compte que chacune comportait certains problèmes. Par exemple:

Catégorie principale

La fonctionnalité est correcte et marchait avec la plupart des navigateurs standards (fureteurs), sauf qu’Internet Explorer ne considère pas ça comme un lien réel mais plutôt comme un anchor (lien vers une section de la même page), dû à l’absence de la partie href, et ne supportait donc pas les attributs CSS comme a:hover afin de lui donner une apparence différente lorsque le curseur de la souris se situait au-dessus, un comportement relativement important dans un menu dynamique.

Catégorie principale

Cette façon permets enfin à Internet Explorer de supporter les attributs CSS puisque nous avons le morceau href qui lui indique que c’est bel et bien un lien. Par contre, après le clic, il renvoyait au haut de la page comme si nous avions un anchor tout au début du code HTML, ce qui est vraiment indésirable.

Catégorie principale

Cette technique solutione quelques problèmes encourus dans les 2 premières méthodes, par contre la technique n’est pas considérée réellement standard par W3C, ce qui peut donner des résultats imprévisibles avec divers navigateurs moins connus, et ne fourni toujours pas un lien vers une page alternative pour ceux qui ne supporte pas Javascript, une mince minorité, soit, mais dans le cas d’un site de commerce électronique, chaque visiteur est potentiellement important.

Les moteurs de recherche ne supportent pas non plus javascript, on pourrait encourir des problèmes d’indexation ou de mauvaise distribution du Google PR dans le site.

Catégorie principale

Une variation mineure des 2 méthodes précédentes, avec les mêmes fautes. Les navigateurs ne nous renvoient pas au haut de la page, comme dans l’utilisation de href="#", mais la valeur de href="" n’est toujours pas standard et ne fourni pas de page alternative pour afficher les catégories seondaires.

Catégorie principale

Cette fois on s’approche plus du format idéal, en effet, le lien comporte une valeur alternative si la fonction javascript n’est pas exécutée pour les visiteurs qui le ne supportent pas et ne peuvent afficher les catégories secondaires. Toutefois, même après l’exécution de la fonction javascript, le lien tient compte de sa valeur et il renvoie tout les visiteurs à la page cible.

Finalement, après des recherches additionnelles, je me suis rendu compte qu’il fallait reformatter un tant soit peu le format précédent afin d’avoir le comportement voulu:

Catégorie principale

Comme on peut voir, l’attribut onclick est déplacé avant la partie href, et on termine l’appel à la fonction avec un retour de valeur false, ce qui force javascript à ne pas tenir compte de l’attribut href qui suit. Donc dans ce cas nous avons finalement tout les morceaux en place:

• Exécution la fonction Javascript qui affiche les catégories secondaires dans notre menu dynamique pour les visiteurs qui le supporte
• La partie href est incluse dans le lien, ce qui permets à Internet Explorer de considérer les valeurs CSS que nous donnons au lien, tel que le changement d’apparence avec un a:hover.
• Le retour d’une valeur fausse return false; nous permets d’éviter de naviguer vers la page alternative inscrite dans l’attribut href.
• Lien vers une page alternative pour ceux qui ne supporte pas Javascript, meilleure indexation du site avec les moteurs de recherche et une distribution naturelle et optimale du Google PR dans un système de pages importantes vers les pages secondaires.

Les visiteurs avec javascript bénéficient d’un menu dynamique qui allège et facilite la navigation. On évite le problème d’Internet Explorer, un défaut navrant mais comme il est encore très populaire, il faut faire avec. Les visiteurs avec un navigateur web limité, comme un téléphone mobile, peuvent quand même accéder à la page alternative qui affiche les sous-catégories. Et les moteurs de recherche peuvent indexer tout le site de façon optimale, une qualité fortement recherchée dans un site commerciale avide de trafic organique.