Href = "#" Ne pas faire défiler

Question

Je suis assez nouveau à JS - donc je me demandais si vous saviez comment résoudre ce problème.

actuel J'ai dans mon code

<a href='#' class="closeLink">close</a> 

qui gère un certain JS pour fermer une boîte. Le problème que j'ai, c'est que lorsque l'utilisateur clique sur le lien - le href = "#" amène l'utilisateur en haut de la page lorsque cela se produit.

Comment résoudre ceci afin qu'il ne le fasse pas? c'est-à-dire que je ne peux pas utiliser quelque chose comme onclick = "return false" car j'imagine que cela empêchera le JS de fonctionner?

Merci

Answer 1

La façon habituelle de le faire est de retourner faux de votre javascript gestionnaire de clic. Cela empêchera l'événement de bouillonner et annulera l'action normale de l'événement. D'après mon expérience, c'est généralement le comportement que vous voulez.

exemple jQuery:

$('.closeLink').click(function() { 
     ...do the close action... 
     return false; 
}); 

Si vous voulez éviter tout simplement l'action normale, vous pouvez, au contraire, il suffit d'utiliser preventDefault.

$('.closeLink').click(function(e) { 
    e.preventDefault(); 
    ... do the close action... 
}); 

Answer 2

Si votre code se passe le eventObject vous pouvez utiliser preventDefault(); retourner faux aide aussi.

mylink.onclick = function(e){ 
e.preventDefault(); 
// stuff 
return false; 
} 

Answer 3

return false est la réponse, mais je le fais habituellement ceci:

$('.closeLink').click(function(event) { 
     event.preventDefault(); 
     ...do the close action... 
}); 

Arrête l'action de se produire avant d'exécuter votre code.

Answer 4

Bien qu'il semble être très populaire, href = '#' n'est pas un mot-clé magique pour JavaScript, c'est juste un lien régulier vers une ancre vide et en tant que tel, c'est inutile. Vous avez essentiellement deux options:

1. Mettre en œuvre une alternative pour les agents utilisateurs JavaScript ignorent, utilisez le paramètre href pour pointer vers et annuler le lien avec JavaScript. Par exemple:

   <a href="close.php" onclick="close(); return false">

2. Lorsque le noscript de remplacement ne sont pas disponibles ou pertinentes, vous n'avez pas besoin d'un lien du tout:

   <span onclick="close(); return false">Close</span>

Answer 5

Wrap, une déclaration div autour d'un lien, faites renvoyer le lien false, ajoutez la fonctionnalité javascript au div on click ...

<div onClick="javascript:close();"> 
    <a href="#" onclick="javascript:return false;">Close</a> 
</div> 

Answer 6

JavaScript version:

myButton.onclick=function(e){ 
    e.preventDefault(); 
    // code 
    return false; 
} 

Version jQuery:

$('.myButtonClass').click(function(e){ 
    e.preventDefault(); 
    // code 
    return false; 
}); 

Ce faire exactement le travail bien! :)

Answer 7

La meilleure façon de résoudre ce problème est d'ajouter juste un autre caractère après le symbole dièse comme ceci:

<a href='#a' class="closeLink">close</a> 

Problème résolu. Oui, c'était aussi simple que ça. Certains peuvent détester cette réponse, mais ils ne peuvent pas nier que cela fonctionne. Assurez-vous que vous n'avez pas réellement une section assignée à "a" ou que cela ira à cette partie de la page. (Je ne vois pas cela aussi souvent que je le fais, cependant) "#" par lui-même, par défaut, va en haut de la page.

Answer 8

Désolé pour la réponse tardive mais personne ne l'a mentionné. Il suffit de le faire <a>Do Stuff</a> sans href et ajouter le style cursor: pointer à l'élément. Ensuite, vous pouvez gérer tout événement, cliquez avec jquery comme suit

$(document).ready(function(){ 
 
    $("#Element").click(function(){ 
 
    alert("Hello"); 
 
    //Do Stuff 
 
    }) 
 
});

#Element { 
 
    cursor: pointer; 
 
} 
 
#Element:hover { 
 
    color: #00f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<a id="Element">Do Stuff</a>

Answer 9

Une option disponible pour vous est de ne pas utiliser href = "#" mais href = "javascript:;" cela vous permettra d'exécuter le gestionnaire onclick tout pas de défilement.

Par exemple

<a href="javascript:;" onclick="doSomething()">Do Something</a>