Quelle est la manière recommandée de traiter les liens utilisés uniquement à des fins stylistiques et/ou interactives ?

Question

Par exemple, le lien ci-dessous déclenche quelque chose dans jQuery mais ne mène pas à une autre page, j'ai utilisé cette méthode il y a quelque temps.

<a class="trigger" href="#"> Click Me </a>

Remarquez qu'il n'y a qu'une balise hash, qui fait généralement sauter la page lorsqu'on clique dessus, non ? [Je pense.] C'est seulement pour les trucs interactifs, ça ne mène pas à une autre page ou autre chose. Je vois beaucoup de développeurs faire ça.

J'ai l'impression que c'est la mauvaise chose à faire. Existe-t-il un autre moyen recommandé de faire cela sans utiliser les attributs HTML d'une manière qui n'est pas censée être utilisée ?

Ne pas utiliser <button> ether car le lien ne serait pas un bouton.

Peut-être sans hachage ?

<a class="trigger"> Click Me </a>

& en CSS :

.trigger {
 cursor: pointer;
 }

Donc l'utilisateur sait toujours que c'est pour quelque chose que vous devez cliquer ?

Answer 1

J'aime faire en sorte que ces liens renvoient un message faux au moment du clic, de sorte que le fait de cliquer dessus n'entraîne aucun saut. Avec jQuery, il suffirait de

$(selector).click(function(e)
{
    e.preventDefault();
});

ou dans le HTML comme tel

<a class="trigger" onclick="return false;" href=""> Click Me </a>

Answer 2

N'enlève pas ce hachis.

Il est vrai que sous les versions (modernes, du moins) de Firefox, Chrome, Opera et Safari, une balise d'ancrage avec un href vide (c'est-à-dire href="", et non un href manquant) s'affiche comme un lien normal qui ne répond pas lorsqu'on clique dessus, contrairement au hash-href qui saute en haut de la page. Internet Explorer, cependant, adopte une approche différente.

Lorsque l'on clique sur un lien sans href dans Internet Explorer, celui-ci réagit en ouvrant le répertoire de votre bureau dans l'Explorateur Windows. J'ai obtenu cette réponse dans IE7 et IE8 (IE6 vient de planter, mais cela pourrait être sans rapport - j'ai eu des problèmes avec cette VM).

Si un utilisateur navigue sur votre site dans IE avec JavaScript désactivé, voulez-vous vraiment que tous vos liens s'ouvrent dans son bureau ? Je ne le pense pas.

Il est également important de noter que la suppression de l'attribut href d'un élément d'ancrage entraîne son affichage en texte brut, c'est-à-dire qu'il n'agit pas comme un lien, qu'il est impossible d'y accéder par tabulation, etc. Ce n'est pas bon.

---

Quant au contrôle du comportement du lien lorsqu'il est cliqué, @partoa a la bonne réponse, mais peut-être incomplète.

Je ne suis pas un gourou du JavaScript, mais d'après ce que j'ai lu, vous ne devez pas utiliser return false; pour ça. Selon cet article Je suis tombé dessus il y a un moment, return false; possède quelques comportements supplémentaires que vous ne souhaitez peut-être pas vraiment. Il vous recommande d'utiliser simplement preventDefault pour arrêter le comportement normal des liens (c'est-à-dire la navigation vers une nouvelle ressource). Lisez ce lien pour voir ce que return false; avant de décider de la manière dont vous voulez le gérer.

Answer 3

A des fins interactives :

En supprimant le href="#" de votre balise, vous la retirez également de l'ordre des onglets par défaut, de sorte que les utilisateurs naviguant avec le clavier ne pourront pas activer votre lien.

Je recommande de garder href="#" dans votre balise et d'ajouter return false à la fin du script qui est exécuté par le lien.

Je ne vois pas pourquoi vous voudriez utiliser une balise A pour des raisons de style.

Answer 4

Dans konqueror (navigateur kde), vous pouvez désactiver les pointeurs de changement. Alors votre solution échoue. Mais en général, je suis d'accord avec vous.