Javascript 当锚标记仅触发 jQuery 操作而不重定向用户时，可以替代 <a href="#"> 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4224920/
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
Alternative to <a href="#"> when the anchor tag only triggers a jQuery action without redirecting the user?
提问by xylitol
I have numerous anchor tags on my page that only trigger jQuery actions on the same page.
我的页面上有许多锚标记，它们仅在同一页面上触发 jQuery 操作。
The don't redirect the user to another location, which is the normal expected behavior of an anchor tag.
不要将用户重定向到另一个位置，这是锚标记的正常预期行为。
I don't want to have restful urls in my app for every action.But, I also don't like sending the user to the top of the page every time they click on one of these <a href="#">tags.
我不想在我的应用程序中为每个操作都提供安静的 url。但是，我也不喜欢在用户每次单击这些<a href="#">标签之一时将其发送到页面顶部。
What's a better value to put inside the hrefvalue of the anchor tag besides #?
href除了 之外，将什么值放入锚标记的值中更好#？
回答by Asbj?rn Ulsberg
Can you reference a fragment on the page that could work as a logical fallback to the non-executed JavaScript action? If so, it makes a lot of sense to reference <a href="#account">and have an id="account"on the page that could work as a fallback.
您能否引用页面上可以作为未执行 JavaScript 操作的逻辑回退的片段？如果是这样，参考<a href="#account">并id="account"在页面上有一个可以作为后备的参考是很有意义的。
Another option is to reference the dynamically loaded content directly; that way you can quite conveniently use the hrefin the Ajax call instead of hard-coding what to request in JavaScript somehow; <a href="/path/to/dynamic/content">.
另一种选择是直接引用动态加载的内容；这样你就可以很方便地href在 Ajax 调用中使用 ，而不是硬编码在 JavaScript 中以某种方式请求什么；<a href="/path/to/dynamic/content">.
Lastly, you can not have the <a href="#">statically in the HTML at all, but instead create it on the fly with jQuery since it's only used by jQuery anyway. No need to pollute the markup with placeholders for JavaScript if the placeholders are only used by and for JavaScript anyway.
最后，您根本不能<a href="#">在 HTML 中静态地使用它，而是使用 jQuery 动态创建它，因为它无论如何只能由 jQuery 使用。如果占位符仅由 JavaScript 使用，并且仅用于 JavaScript，则无需使用 JavaScript 的占位符污染标记。
Regarding "sending the user to the top of the page"; you should just return falsefrom your the function you have hooked up as a click()handler;
关于“将用户发送到页面顶部”；你应该return false从你作为click()处理程序连接的函数中获取；
$('a').click(function() {
// Do your stuff.
// The below line prevents the 'href' on the anchor to be followed.
return false;
});
回答by Robin Whittleton
You should really be using a <button>element for JS-only actions. They have a default action (if inside a form) but outside of a form they're purely for user triggered actions that you bind your JS event handler to.
您真的应该将<button>元素用于 JS-only 操作。它们有一个默认操作（如果在表单内），但在表单外，它们纯粹用于将 JS 事件处理程序绑定到的用户触发操作。
回答by RAC
Have you tried omitting the href parameter?
您是否尝试过省略 href 参数？
<a>Link title</a>
That should work just fine and not provoke the browser to load a webpage or change the pages position. In fact it won't do anything unless you have some JavaScript to support it.
这应该可以正常工作并且不会引起浏览器加载网页或更改页面位置。事实上，除非你有一些 JavaScript 来支持它，否则它不会做任何事情。
The href parameter is optional so why include it if you aren't using it?
href 参数是可选的，如果您不使用它，为什么要包含它？
回答by extjs user
I use below code and that works fine.
我使用下面的代码，效果很好。
<div class="panel-heading">Definition
<div class="pull-right">
<i class="fa fa-wrench"></i>
<a id="step3Ad" href="javascript:void(0);">Advanced</a>
</div>
</div
回答by T.J. Crowder
If you have links that aren't links, perhaps they shouldn't be links? :-) You might consider a different UI element that doesn't have a default behavior (outside of a form), like button(you can style buttons to a substantial degree). Or you could use spanor similar, but if you do be sure to set the appropriate accessibility information (such as an ARIA role="link") so that you don't mess up screen readers (and browser tabbing).
如果您有不是链接的链接，也许它们不应该是链接？:-) 您可能会考虑一个不同的 UI 元素，它没有默认行为（在表单之外），例如button（您可以在很大程度上设置按钮样式）。或者您可以使用span或类似，但如果您确实设置了适当的辅助功能信息（例如 ARIA role="link"），则不会弄乱屏幕阅读器（和浏览器标签）。
But if you want to continue to use <a href="#">...</a>, just attach a handler to them that calls event.preventDefault();or returns false.
但是，如果您想继续使用<a href="#">...</a>，只需为它们附加一个调用event.preventDefault();或返回的处理程序false。
回答by Gareth
If the anchor is useless to people who don't have javascript, then they shouldn't see it at all.
如果锚对没有 javascript 的人没用，那么他们根本不应该看到它。
The best alternative is to generate these links using jQuery on page load - that way the only people who see them are those who will use them.
最好的选择是在页面加载时使用 jQuery 生成这些链接 - 这样，只有那些会使用它们的人才能看到它们。
In this case, having href="#"is fine, because as long as your event handler finishes with return false;then the hrefwill never be followed
在这种情况下，具有href="#"优良的，因为只要你的事件处理程序完成与return false;那么href将永远遵循
回答by Jost
#is fine. But the callbacks that are triggered should then return false.
#很好。但是触发的回调应该然后return false。
// assigning a click callback to all anchors
$('a').click(function(evt){
//... do stuff
return false; // avoid jump to '#'
})
回答by DanneManne
I prefer to use:
我更喜欢使用：
<a href="javascript:">foo</a>
unless it is actually an ajax call to load a partial template in which case I use something like this:
除非它实际上是加载部分模板的 ajax 调用，在这种情况下，我使用以下内容：
<a href="/link/to/page" onClick="ajax_request_to_partial(); return false;">foo</a>
By returning false in the onclick event, you make sure the site is not reloaded, but it can still be used for opening the url in a new page.
通过在 onclick 事件中返回 false，您可以确保站点不会重新加载，但它仍可用于在新页面中打开 url。
回答by benhowdle89
return false;
Use this to stop browser sending them to top of page?
使用它来阻止浏览器将它们发送到页面顶部？
回答by Vadyus
if you bind some action on click on you can call preventDefault() to avoid sending user in top of page
如果你在点击时绑定一些动作，你可以调用 preventDefault() 以避免在页面顶部发送用户
$("a.clickable").live('click',function(){$(this).doSome(); $(this).preventDefault()});
