jQuery hyperliens href valeur?

Sur mon site j'utilise jQuery pour accrocher les événements d'éléments, à savoir les liens hypertexte. Comme ces liens uniquement à effectuer des actions sur la page en cours, et ne conduisent nulle part, j'ai été mettre un attribut href de "#", dans:

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

Cependant dans certains navigateurs, ce qui provoque la page pour faire défiler de haut, qui est de toute évidence le comportement indésirable. J'ai essayé à l'aide d'un vide href valeur, incluant ou non un, mais ensuite la souris ne permet pas de changer le curseur en forme de main sur le curseur.

Que dois-je mettre dedans?

Suffit d'utiliser les CSS pour obtenir le hover curseur en forme de main: un {curseur:pointeur} et vous aurez la main sur tous les liens, peu importe.
Où sont les pseudo-liens-vous de prendre? Êtes-vous de faire défiler la page, ou allez-vous à d'autres ancres?

InformationsquelleAutor Tom | 2009-04-06

51
```
$('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 qui va déclencher l' preventDefault() méthode et vous ne serez pas redirigé vers ce lieu.
- .live() est probablement la meilleure méthode pour cela.
- .live() est inutile, sauf si il met les ancres dans le DOM via JS (par exemple: requête AJAX)
- Pourquoi ne pas simplement return false;?
- Qui serait non-jQuery. Nous ne pouvons pas nous qui ont!
- Comment est l'utilisation de jQuery comportement de return false sur les événements pour éviter que le navigateur par défaut de l'action et de la remontée d'événements non-jQuery?
- C'était juste une petite blague à propos de la tendance à l' (inutilement) utiliser jQuery ici 😉
- À mon humble avis, je l'utiliserais href="javascript:void(null);"
- Le plus gros problème est qu'aucune de ces solutions ne fonctionne avec javascript désactivé. Le # est la meilleure des options disponibles, à mon avis.
- Ces commentaires sont effrayants. @Bogdan .live() n'est pas "inutile" de vivre ne vous empêche de lier un événement à chaque ancre sur la page. @RoTaRa de jQuery .stopPropagation() est "basé sur DOM3 Événements comme spécifié par le Langage ECMAScript de Liaison." @andufo @user7966 href="javascript:void(null)" et href="#" sont deux de mauvaises solutions, parce qu'ils ne se dégradera pas pour les non-JavaScript expériences.
- et tous les autres: pourriez-vous s'il vous plaît point à moi/nous, qui est "le meilleur" (?) approche, peut-être d'assumer la dégradation gracieuse comme une mesure de la qualité? TA
- Mise à JOUR: vivre maintenant obsolète
InformationsquelleAutor Bogdan Constantinescu
39

Ces "ancre" qui existent uniquement pour fournir un événement de clic, mais ne sont pas réellement des liens vers d'autres contenus, faut vraiment être bouton éléments parce que c'est ce qu'ils sont vraiment.

Il peut être appelée de la sorte:
```
<button style="border:none; background:transparent; cursor: pointer;">Click me</button>
```
Et bien sûr, cliquez sur événements peuvent être attachés à des boutons sans se soucier de la navigateur de sauter vers le haut, et sans ajout superflu de javascript comme onclick="return false;" ou d'un événement.preventDefault() .
- Cela devrait être upvoted. Il est probablement le plus de la réponse correcte à l'OP.
- Je suis d'accord. C'est une bien meilleure idée.
- approche intéressante, mais les boutons ne sont pas des liens. vous ne pouvez pas le droit de cliquer sur un bouton et choisissez "ouvrir dans un nouvel onglet", qui est une commune de la navigation habitude. Le <a> doit contenir un valide href=" qui" devrait être remplacé par du javascript (dans le cas où le js est activé). Dans les cas que nous voulons juste une requête Ajax ensuite, cette approche est la meilleure.
- Cela devrait vraiment être transformé en accepté de répondre.
- Super réponse! Il faut l'accepté de répondre à
InformationsquelleAutor talentedmrjones
36

Vous devriez vraiment mettre un lien réel existe. Je ne veux pas sonner comme un pédant, mais c'est une assez mauvaise habitude à prendre. JQuery et Ajax doit toujours être la dernière chose que vous mettre en œuvre. Si vous avez un lien qui ne va pas-où, vous n'êtes pas en train de faire.

Je ne suis pas casse tes couilles, je veux dire qu'avec toutes les bonnes intentions.
- Ce qu'il faut vraiment faire, c'est de l'injection de liens via JavaScript de toute façon, dans ce cas, je ne vois pas le problème de ne pas avoir une url valide.
- Ce qu'il faudrait vraiment faire est de pointer les liens vers l'endroit où le non-javascript équivalent sera exécuté. Puis en substituant l'action en jQuery. Je suis avec gargantuesque sur ce...
- Parfois, cela fait sens, parfois, il n'est pas, comme toujours, cela dépend de la situation. Nous allons du même côté 😉
- Je vais avancer très prudemment, puisque ce genre de conversation peut très vite sortir de la main. Je veux pas de mal ou d'insulter n'importe qui, je vous l'assure. Mais avec un site web, je ne peux pas penser à toutes les occasions où il serait logique d'avoir un lien qui ne va pas-où.
- Je l'ai fait moi-même et qui n'a pas, et j'ai aussi été un peu dans le cul d'un millier de fois si une erreur javascript dans une autre partie du code apporte tout s'écraser vers le bas, ou, lorsque les pages sont lentes à charger, mais les gens sont prompts à appuyer sur les boutons. Donc maintenant, je ne le faisons plus.
- +1. Ce n'est pas seulement "droit", comme gargantuesque plus tard, commentaire suggère, faire "bonne" volonté de contribuer à éliminer les bugs dans votre page/app.
- Il est impossible d'échouer normalement si vous n'avez pas de liens réels, et il est probable que la plupart des moteurs de recherche ne sera jamais analyser ces pages, même si certains peuvent analyser correctement JS ce n'est pas garanti.
- Malgré l'amélioration des moyens en n'utilisant pas des liens, l'auteur pourrait être dans une situation de maintenir ou de modifier quelque chose sans la possibilité de modifier la conception auquel cas la question d'origine a besoin d'une réponse directe; bien sûr, cette réponse est la bonne comme la meilleure pratique pour la connaissance générale, lors du démarrage de projets, il est donc bon matériel d'appui dans ce fil. Je pense qu'une non-réponse directe, il est surfaite.
- 100% d'accord avec @gargantaun si c'est un site internet... si vous développez une application web... je pense que c'est OK d'avoir ces "faux" des liens.
InformationsquelleAutor gargantuan
11

Pourquoi utiliser un <a href>? - Je le résoudre comme ceci:

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

Et de style avec:

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

Vous pouvez facilement y accéder avec jQuery:

$(".a").click();
- Pourquoi cette baisse a voté?
- Je suppose qu'il est descendu-voté parce qu'il se sent un peu dégueulasse. N'est-ce pas un peu de codage, juste se sentir un peu "smoke and mirrors" pour vous? J'aime avoir raisonnablement standard HTML avec du javascript et du CSS en ajoutant la beauté sur le dessus. Un lien est un lien est un lien - c'n'est pas une classe 'a' span.
- -1: Ne pas utiliser la sémantique-gratuit HTML avec CSS pour de faux les visuels de la sémantique des comportements par défaut lors de la sémantique et fonctionnel équivalent en HTML. gargantua est droit.
- Je ne suis d'accord avec la baisse de vote, soit. Si vous utilisez une plage pour la capture d'événements est mal, alors pourquoi jQuery dans la documentation officielle utilise une solution similaire à cette réponse? docs.jquery.com/Events/bind#typedatafn. En fait, depuis que les liens d'aller n'importe où dans la page, je pense que l'utilisation d'une durée de mieux qu'une balise d'ancrage. Si, au lieu de la durée de l', il a utilisé p, que penseriez-vous? Je crois que dans cet exemple, la classe devrait avoir un meilleur nom à la place de "feindre une ancre" difficile.
- Ce qui est mauvais, si vous avez un lien, il devrait être un <a> tag. Pas une durée déguisé pour être un <a> il n'a pas de sens de le faire de cette manière, quel que soit.
- jQuery documentation officielle est souvent un pantalon. Bien sûr, vous pouvez joignez d'événements DOM à tout élément, mais cela ne signifie pas que vous devez remplacer générique/non-éléments sémantiques lorsqu'il y a de plus approprié éléments sémantiques qui ont déjà le comportement souhaité. Dans ce cas, un lien (<a>) n'est pas appropriée (comme gargantuesque dit). Un <button> est la plus appropriée de l'élément (comme talentedmrjones dit).
InformationsquelleAutor bart
9

Ajouter return false à la fin de votre gestionnaire de clic, ce qui empêche le navigateur par défaut du gestionnaire de fortunes qui tente de rediriger la page:
```
$('a').click(function() {
//do stuff
return false;
});
```
- ne fonctionne pas ici. Sur firefox 3.5
- merci pour cette remarque, ni de javascript: solutions de travail. oups!
- J'ai fait le test et cela a fonctionné pour moi .
InformationsquelleAutor roryf
5

à l'aide de jquery, vous voudrez peut-être seulement pour ceux avec un '#'
```
$('a[href=#]').click(function(){return false;});
```
si vous utilisez le plus récent jquery (1.3.x), il n'y a pas besoin de se lier à nouveau quand les changements de page:
```
$('a[href=#]').live('click', function(){return false;});
```
InformationsquelleAutor djspark
4

vous devriez utiliser <a href="javascript:void(0)" ></a>
au lieu de <a href="#" ></a>
- Une erreur commune est d'oublier le point-virgule dans <a href="javascript:void(0);" ></a>
- javascript dans le href est généralement une mauvaise pratique
InformationsquelleAutor mohsen
3

Me demande pourquoi personne n'a dit ici plus haut: prévenir <a href="#"> de défilement du document de position vers le haut, il suffit d'utiliser <a href="#/"> à la place. C'est simple HTML, pas de JQuery nécessaire. À l'aide de event.preventDefault(); est juste trop!

InformationsquelleAutor Best
1

Je sais c'est vieux mais wow, il y a une solution facile.

supprimer le "href" totalement et il suffit d'ajouter une classe qui effectue les opérations suivantes:
```
.no-href { cursor:pointer: }
```
Et c'est tout!
- Après des années, merci! lol
InformationsquelleAutor Justin
0

Je presque eu ce problème et c'était très tromper. Je suis en fournissant une réponse au cas où quelqu'un s'enroule dans ma position même.
1. Je pensée j'ai eu ce problème
2. Mais, j'ai été en utilisant return false et javascript:void(0);
3. Alors une différence distincte dans la résolution de gardé revêtement:
4. J'ai réalisé qu'il ne va pas TOUT le chemin vers le haut et mon problème de la zone près du bas de la page afin que ce saut était étrange et gênant.
5. J'ai réalisé que j'ai été en utilisant fadeIn() [bibliothèque jQuery], qui, pour un court laps de temps mon contenu a été display:none
6. Et puis mon contenu étendu la portée de la page! Provoquant ce qui ressemble à un saut!
7. À l'aide de la visibilité caché bascule maintenant..
Espère que cela aide la personne coincé avec des sauts!!

InformationsquelleAutor amurrell
-1

Au lieu de cela, vous pouvez tout simplement avoir le href, comme ci-dessous:
```
<a href="javascript:;">My Link</a>
```
Il ne sera pas de défilement vers le haut.
- inline JS comme ce n'est pas grand. Mieux utiliser preventDefault. Beaucoup plus facile d'entretien, et beaucoup moins d'un hack.
InformationsquelleAutor Pratik Thakkar
-2
```
<a href="#nogo">My Link</a>
```
- Je ne sais pas pourquoi vous avez voté cela, mais avez-vous déjà essayé???? Cela fonctionne réellement. Si il n'y a pas d'élément avec l'id "nogo", puis la page ne sont pas de défilement.
- la réponse a été très probablement downvoted avant de le modifier
InformationsquelleAutor Dotcream

Vous devez vous connecter pour publier un commentaire.