Liens utilisés pour activer les fonctions JavaScript

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

Lorsque vous créez une application à l'aide de JavaScript brut, vous aurez parfois la nécessité de déclencher une fonction lorsque l'utilisateur clique sur un lien.

Vous pouvez généralement le faire de 2 manières.

Supposons que la fonction que vous souhaitez exécuter soit appeléehandleClick():

function handleClick() {
  alert('clicked')
}

La première façon est d'utiliser un lien comme celui-ci:

<a href="#" onclick="handleClick()">Click here</a>

La deuxième façon est d'utiliser

<a href="javascript:void(0)" onclick="handleClick()">Click here</a>

Ce sont deux syntaxes très similaires, la seule différence est lahrefvaleur d'attribut.

Le premier esthref="#", le second esthref="javascript:void(0)". Vous pouvez également voir cette syntaxehref="javascript:;", ce qui équivaut au second.

Maintenant, quelle est la différence dans le comportement de ces 2 méthodes?

Lorsque l'utilisateur clique sur lehref="#"lien, vousdoitassurez-vous que vous revenezfalseà partir du gestionnaire d'événements, sinon le navigateur revient en haut de la page:

function handleClick() {
  alert('clicked')
  return false
}

De plus, même si vous ajoutez ceci mais que JavaScript est désactivé ou ne s'exécute pas pour une raison quelconque, le navigateur revient en haut de la page. C'est presque toujours une chose à éviter, donc j'utiliserais personnellement le deuxième formulaire,href="javascript:void(0)".

Dans les deux sens, lehandleClick()La fonction ne sera pas appelée si JavaScript est désactivé, ou s'il y a une erreur dans le JavaScript et si l'exécution de JavaScript est interrompue.

Pour éviter cela, vous pouvez utiliser une véritable URL dans lehrefcomme solution de secours, les navigateurs déplaceront l'utilisateur vers une page spécifique, en utilisant la méthode HTTP GET, bien que ce ne soit pas toujours possible ou pratique.

Mais c'est une bonne pratique et les meilleures pratiques ne sont pas toujours pratiques, mais vous devez en tenir compte lors de la phase de conception de votre application, car vous ne pouvez pas simplement créer le cas d'utilisation idéal et ignorer toutes les choses possibles qui pourraient mal tourner. .

Si quelque chose ne va pas, l'utilisateur vous en voudra ainsi que vos liens rompus

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: