Liens hypertextes jQuery - valeur href ?

Question

Sur mon site web, j'utilise jQuery pour accrocher les événements des éléments, à savoir les hyperliens. Comme ces hyperliens n'effectuent que des actions sur la page en cours et ne mènent nulle part, j'ai mis un attribut href de "#" :

<a href="#">My Link</a>

Cependant, dans certains navigateurs, cela fait défiler la page de droite à gauche, ce qui est évidemment un comportement indésirable. J'ai essayé d'utiliser une valeur href vide, ou de ne pas en inclure, mais la souris ne se transforme pas en curseur manuel au survol.

Qu'est-ce que je dois mettre là-dedans ?

Answer 1

$('a').click(function (event) 
{ 
     event.preventDefault(); 
     //here you can also do all sort of things 
});

Ensuite, vous pouvez mettre dans chaque href ce que vous voulez et jQuery déclenchera la preventDefault() et vous ne serez pas redirigé vers cet endroit.

Answer 2

Ces "ancres" qui n'existent que pour fournir un événement de clic, mais qui ne renvoient pas réellement à un autre contenu, devraient vraiment être bouton car c'est ce qu'ils sont vraiment.

Il peut être stylisé comme suit :

<button style="border:none; background:transparent; cursor: pointer;">Click me</button>

Et bien sûr, les événements de clic peuvent être attachés aux boutons sans que le navigateur ne saute en haut de la page, et sans ajouter de javascript inutile tel que onclick="return false ;" ou event.preventDefault() .

Answer 3

Vous devriez vraiment mettre un vrai lien là-dedans. Je ne veux pas passer pour un pédant, mais c'est une assez mauvaise habitude à prendre. JQuery et Ajax devraient toujours être la dernière chose que vous implémentez. Si vous avez un lien qui ne va nulle part, vous ne faites pas les choses correctement.

Je ne vous casse pas les couilles, je le dis avec la meilleure intention du monde.

Answer 4

Pourquoi utiliser un <a href> ? Je résous le problème comme suit :

<span class='a'>fake link</span>

Et le style avec :

.a {text-decoration:underline; cursor:pointer;}

Vous pouvez y accéder facilement avec jQuery :

$(".a").click();

Answer 5

Ajoutez return false à la fin de votre gestionnaire de clics, ce qui empêche le gestionnaire par défaut du navigateur de se produire et de tenter de rediriger la page :

$('a').click(function() {
// do stuff
return false;
});