Javascript 如何防止点击“#”链接跳转到页面顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3252730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent a click on a '#' link from jumping to top of page?
提问by st4ck0v3rfl0w
I'm currently using <a>tags with jQuery to initiate things like click events, etc.
我目前正在使用<a>带有 jQuery 的标签来启动点击事件等。
Example is <a href="#" class="someclass">Text</a>
例子是 <a href="#" class="someclass">Text</a>
But I hate how the '#' makes the page jump to the top of the page. What can I do instead?
但我讨厌“#”如何让页面跳转到页面顶部。我可以做什么？
回答by Chris
So this is old but... just in case someone finds this in a search.
所以这是旧的但是......以防万一有人在搜索中找到它。
Just use "#/"instead of "#"and the page won't jump.
只需使用"#/"而不是"#"页面就不会跳转。
回答by BoltClock
In jQuery, when you handle the click event, return false to stop the link from responding the usual wayprevent the default action, which is to visit the hrefattribute, from taking place (per PoweRoy's comment and Erik's answer):
在jQuery中，当你处理点击事件时， 返回 false 以阻止链接以通常的方式响应防止发生默认操作，即访问href属性（根据 PoweRoy 的评论和Erik 的回答）：
$('a.someclass').click(function(e)
{
// Special stuff to do when this link is clicked...
// Cancel the default action
e.preventDefault();
});
回答by guy schaller
you can even write it just like this:
你甚至可以这样写：
<a href="javascript:void(0);"></a>
im not sure its a better way but it is a way :)
我不确定它是一种更好的方法，但它是一种方法:)
回答by Nabi K.A.Z.
Solution #1: (plain)
解决方案#1：（简单）
<a href="#!" class="someclass">Text</a>
Solution #2: (needed javascript)
解决方案#2：（需要javascript）
<a href="javascript:void(0);" class="someclass">Text</a>
Solution #3: (needed jQuery)
解决方案#3：（需要jQuery）
<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
e.preventDefault();
});
</script>
回答by Erik T?yr? Silfversw?rd
You can use event.preventDefault()to avoid this. Read more here: http://api.jquery.com/event.preventDefault/.
您可以使用它event.preventDefault()来避免这种情况。在此处阅读更多信息：http: //api.jquery.com/event.preventDefault/。
回答by takeshin
Just use <input type="button" />instead of <a>and use CSS to style it to look like a link if you wish.
如果您愿意，只需使用<input type="button" />代替<a>并使用 CSS 将其样式设置为看起来像一个链接。
Buttons are made specifically for clicking, and they don't need any href attributes.
按钮是专门为点击而制作的，它们不需要任何 href 属性。
The best way is to use onload action to create the button and append it where you need via javascript, so with javascript disabled, they will not show at all and do not confuse the user.
最好的方法是使用 onload 操作创建按钮并通过 javascript 将其附加到您需要的位置，因此在禁用 javascript 的情况下，它们根本不会显示并且不会混淆用户。
When you use href="#"you get tons of different links pointing to the same location, which won't work when the agent does not support JavaScript.
当您使用时，href="#"您会得到大量指向同一位置的不同链接，当代理不支持 JavaScript 时，这些链接将无法工作。
回答by Neothor
If you want to use a anchor you can use http://api.jquery.com/event.preventDefault/like the other answers suggested.
如果您想使用锚点，您可以像其他建议的答案一样使用http://api.jquery.com/event.preventDefault/。
You can also use any other element like a span and attach the click event to that.
您还可以使用任何其他元素（如跨度）并将点击事件附加到该元素。
$("span.clickable").click(function(){
alert('Yeah I was clicked');
});
回答by Veve
You can use #0as href, since 0isn't allowed as an id, the page won't jump.
你可以使用#0href，因为0不允许作为id，页面不会跳转。
<a href="#0" class="someclass">Text</a>
回答by Praveen Manne
$('a[href="#"]').click(function(e) {e.preventDefault(); });
回答by martinedwards
Links with href="#" should almost always be replaced with a button element:
带有 href="#" 的链接应该几乎总是被一个按钮元素替换：
<button class="someclass">Text</button>
Using links with href="#" is also an accessibility concern as these links will be visible to screen readers, which will read out "Link - Text" but if the user clicks it won't go anywhere.
使用带有 href="#" 的链接也是一个可访问性问题，因为屏幕阅读器可以看到这些链接，屏幕阅读器会读出“链接 - 文本”，但如果用户点击它就不会去任何地方。
