jQuery 用户单击链接（<a> 元素）时如何取消导航？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/866583/
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 cancel navigation when user clicks a link (<a> element)?
提问by Max Schmeling
I'm trying to load some stuff using AJAX when a user clicks a link, but I want the link to actually go somewhere so that the app still works when javascript is disabled. Is there any way to just do something with javascript and cancel navigation when a link is clicked?
当用户单击链接时，我尝试使用 AJAX 加载一些内容，但我希望链接实际转到某个位置，以便在禁用 javascript 时应用程序仍然可以工作。有什么办法可以在单击链接时使用 javascript 执行某些操作并取消导航？
What's the best practice? Can that be done, or do I need to replace the link using javascript or what?
最佳做法是什么？可以做到这一点，还是我需要使用 javascript 或什么来替换链接？
回答by Paolo Bergantino
If you have HTML like this:
如果你有这样的 HTML：
<a href="no_javascript.html" id="mylink">Do Something</a>
You would do something like this with jQuery:
你可以用 jQuery 做这样的事情：
$(document).ready(function() {
$('#mylink').click(function() {
doSomethingCool();
return false; // cancel the event
});
});
All you have to do is cancel the click event with Javascript to prevent the default action from happening. So when someone clicks the link with Javascript enabled, doSomethingCool();is called and the click event is cancelled (thus the return false;) and prevents the browser from going to the page specified. If they have Javascript disabled, however, it would take them to no_javascript.htmldirectly.
您所要做的就是使用 Javascript 取消单击事件以防止发生默认操作。因此，当有人单击启用了 Javascript 的链接时，doSomethingCool();将调用并取消单击事件（因此return false;）并阻止浏览器转到指定的页面。但是，如果他们禁用了 Javascript，则会no_javascript.html直接将他们带到。
回答by Partap Davis
None of this worked for me with the Google Chrome browser.
对于 Google Chrome 浏览器，这些都不适合我。
Here's what did work though (using jQuery):
这是有效的（使用 jQuery）：
$(document).ready(function() {
$('#mylink').click(function(event) {
doSomethingCool();
event.preventDefault(); // cancel the event
});
});
回答by Sergei Kovalenko
why jQuery?
为什么是jQuery？
HTML:
HTML：
<a href="no_javascript.html" onclick="return doSmth()">Link</a>
...and javascript code:
...和javascript代码：
function doSmth(){
// your code here
return false
}
回答by jsa
What I would do are :
我会做的是：
a. for href attribute, javascript:void();will be set
一种。对于 href 属性，javascript:void();将被设置
b. for onclick event, will provide a function to handle the click event and that function will return false.
湾 对于 onclick 事件，将提供一个函数来处理单击事件，该函数将返回 false。
eg:
例如：
<script type="text/javascript">
function myfunction()
{
//do something
return false;
}
</script>
<a href="javascript:void();" onclick="myfunction()">Link</a>
回答by Andrew
<a href="http://www.google.com" class="ignore-click">Test</a>
with jQuery:
使用 jQuery：
<script>
$(".ignore-click").click(function(){
return false;
})
</script>
with JavaScript
使用 JavaScript
<script>
for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
event.preventDefault();
return false;
});
}
</script>
You assign class .ignore-clickto as many elements you like and clicks on those elements will be ignored
您将类分配给.ignore-click您喜欢的任意数量的元素，并且将忽略对这些元素的点击
回答by chill
for IE at least, just put this.event.returnValue = false;at the end of the method.
至少对于 IE，只需放在this.event.returnValue = false;方法的末尾即可。
e.g:
例如：
function onClickFunction()
{
someMethod();
this.event.returnValue = false;
}
I had a complex method where this did the trick.
我有一个复杂的方法来解决这个问题。
回答by chill
I use document.location.replaceto navigate, but when I want to cancel the navigation, return false(in the same function as document.location.replace) doesn't cancel the navigation.
我document.location.replace用来导航，但是当我想取消导航时，return false（与 功能相同document.location.replace）不会取消导航。
回答by Chad timothy
The best way should be this.
最好的办法应该是这个。
<a href="javascript:undefined"></a>
回答by Javier López de Ancos
is simple, use rel="nofollow" attribute
很简单，使用 rel="nofollow" 属性
<a href="signin.php" rel="nofollow">sign in</a>
