Comment empêcher un clic sur un lien "#" de sauter en haut de la page?
J'utilise actuellement les balises <a> avec jQuery pour lancer des événements tels que les événements liés aux clics, etc.
Exemple: <a href="#" class="someclass">Text</a>
Mais je déteste comment le "#" fait que la page passe en haut de la page. Que puis-je faire à la place?
Dans jQuery, lorsque vous gérez l'événement click, renvoie false pour empêcher le lien de répondre de la manière habituelle empêcher l'action par défaut, qui consiste à visiter l'attribut href, de se produire (selon le commentaire de PoweRoy et la réponse d'Erik ):
$('a.someclass').click(function(e)
{
// Special stuff to do when this link is clicked...
// Cancel the default action
e.preventDefault();
});
Donc c'est vieux mais ... juste au cas où quelqu'un le trouverait dans une recherche.
Utilisez simplement "#/" au lieu de "#" et la page ne sautera pas.
vous pouvez même l'écrire comme ceci:
<a href="javascript:void(0);"></a>
je ne suis pas sûr que ce soit un meilleur moyen, mais c'est un moyen :)
Solution n ° 1: (en clair)
<a href="#!" class="someclass">Text</a>
Solution n ° 2: (nécessaire javascript)
<a href="javascript:void(0);" class="someclass">Text</a>
Solution n ° 3: (nécessaire jQuery)
<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
e.preventDefault();
});
</script>
Vous pouvez utiliser event.preventDefault() pour éviter cela. Lisez plus ici: http://api.jquery.com/event.preventDefault/ .
Utilisez simplement <input type="button" /> au lieu de <a> et utilisez CSS pour le styler afin qu'il ressemble à un lien si vous le souhaitez.
Les boutons sont conçus spécifiquement pour cliquer, et ils n'ont pas besoin d'attributs href.
Le meilleur moyen consiste à utiliser l'action onload pour créer le bouton et l'ajouter où vous le souhaitez via javascript. Ainsi, si javascript est désactivé, il ne s'affichera pas du tout et ne confondra pas l'utilisateur.
Lorsque vous utilisez href="#", vous obtenez des tonnes de liens différents pointant vers le même emplacement, ce qui ne fonctionnera pas si l'agent ne prend pas en charge JavaScript.
Si vous souhaitez utiliser une ancre, vous pouvez utiliser http://api.jquery.com/event.preventDefault/ comme les autres réponses proposées.
Vous pouvez également utiliser n'importe quel autre élément, tel qu'une étendue, et y associer l'événement click.
$("span.clickable").click(function(){
alert('Yeah I was clicked');
});
Vous pouvez utiliser #0 comme href, puisque 0 n'est pas autorisé en tant qu'id, la page ne sautera pas.
<a href="#0" class="someclass">Text</a>
Si l'élément n'a pas de valeur href significative, il ne s'agit pas vraiment d'un lien, alors pourquoi ne pas utiliser un autre élément à la place?
Comme suggéré par Neothor, une étendue est tout aussi appropriée et, si elle est stylée correctement, elle sera visiblement évidente en tant qu'article sur lequel vous pouvez cliquer. Vous pouvez même joindre un événement de survol pour que l'élément s'allume lorsque la souris de l'utilisateur le survole.
Toutefois, cela dit, vous voudrez peut-être repenser la conception de votre site afin qu'il fonctionne sans javascript, mais qu'il soit amélioré par javascript lorsqu'il est disponible.
Juste utiliser
<a href="javascript:;" class="someclass">Text</a>
JQUERY
$('.someclass').click(function(e) { alert("action here"); }
$('a[href="#"]').click(function(e) {e.preventDefault(); });
Vous pouvez simplement passer une balise d'ancrage sans propriété href et utiliser jQuery pour effectuer l'action requise:
<a class="foo">bar</a>
Si vous souhaitez migrer vers une section d'ancrage sur la même page sans sauter de page, utilisez:
Utilisez simplement "# /" au lieu de "#" par exemple
<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..
J'ai utilisé:
<a href="javascript://nop/" class="someClass">Text</a>
J'ai toujours utilisé:
<a href="#?">Some text</a>
en essayant d'empêcher le saut de page. Je ne sais pas si c'est le meilleur, mais cela semble bien fonctionner depuis des années.
Les liens avec href = "#" devraient presque toujours être remplacés par un élément button:
<button class="someclass">Text</button>
L'utilisation de liens avec href = "#" est également un problème d'accessibilité, car ces liens seront visibles par les lecteurs d'écran, qui liront le texte "Lien - Texte", mais si l'utilisateur clique dessus, il n'ira nulle part.
J'utilise quelque chose comme ça:
<a href="#null" class="someclass">Text</a>
Pour empêcher la page de sauter, vous devez appeler e.stopPropagation(); après avoir appelé e.preventDefault();:
stopPropagation empêche l'événement de monter dans l'arborescence DOM. Plus d'infos ici: https://api.jquery.com/event.stoppropagation/
Vous pouvez également renvoyer false après avoir traité votre requête.
Par exemple.
$(".clickableAnchor").live(
"click",
function(){
//your code
return false; //<- prevents redirect to href address
}
);
Il existe 4 façons similaires d'empêcher la page de sauter en haut sans JavaScript:
Option 1:
<a href="#0">Link</a>
Option 2:
<a href="#!">Link</a>
Option 3:
<a href="#/">Link</a>
Option 4 ( Non recommandé ):
<a href="javascript:void(0);">Link</a>
Mais il est préférable d'utiliser event.preventDefault() si vous gérez l'événement click dans jQuery.
Les <a href="#!">Link</a> et <a href="#/">Link</a> ne fonctionnent pas si l'on doit cliquer plusieurs fois sur la même entrée. Il ne faut qu'un seul événement pour chaque clic.
toujours la meilleure façon d'aller est avec <a href="#">Link</a>
puis,
event.preventDefault();
Ajouter quelque chose après # définit le focus de la page sur l'élément ayant cet ID. La solution la plus simple consiste à utiliser #/ même si vous utilisez jQuery. Cependant, si vous gérez l'événement dans jQuery, event.preventDefault() est le chemin à parcourir.