如何使用 Javascript 防止 Anchor 标签的默认操作?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5087275/
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 default action for an Anchor tag using Javascript?
提问by Anwar
I'm trying to prevent default action on an anchor ("a") tag. In my scenario few lines of html are rendered on the fly using ajax (after a form is submitted) and I want to add an event listener that
我试图阻止对锚(“a”)标签的默认操作。在我的场景中,使用 ajax(提交表单后)即时呈现了几行 html,我想添加一个事件侦听器
performs an action when a newly created link is clicked
prevent the browser from opening that link.
单击新创建的链接时执行操作
阻止浏览器打开该链接。
Here's what I'm writing:
这是我正在写的内容:
a = document.getElementById("new_link");
a.addEventListener("click",function(){alert("preform action");
return false;},false);
I have also tried:
我也试过:
a.addEventListener("click",function(e){e.preventDefault(); alert("preform action");});
When I click on the link "a" it shows the alert message but still opens the "href" link where as I want it to show the message and then stop.
当我单击链接“a”时,它会显示警报消息,但仍会打开“href”链接,因为我希望它显示消息然后停止。
Both methods show alerts if attached to an pre-existing link but do not work when attached to newly inserted links (via ajax).. which is what I need to do.
如果附加到预先存在的链接,这两种方法都会显示警报,但在附加到新插入的链接(通过 ajax)时不起作用。这是我需要做的。
Any help/suggestions.
任何帮助/建议。
Thanks.
谢谢。
回答by caseyohara
Using the jQuery library, you can stop the event which was bound to the jQ object (in this case, all elements) by calling the .preventDefault() method on the event passed as a parameter of the callback.
使用 jQuery 库,您可以通过对作为回调参数传递的事件调用 .preventDefault() 方法来停止绑定到 jQ 对象(在本例中为所有元素)的事件。
Try this:
试试这个:
$('a').click( function(e) {
e.preventDefault();
alert("perform action");
});
回答by Jason Hazel
Reviving an old topic, but I wanted to provide an option that didn't rely on jQuery.
重温一个老话题,但我想提供一个不依赖于 jQuery 的选项。
a = document.getElementById("new_link");
a.addEventListener("click",function(){
alert("preform action");
window.event.preventDefault();
},false);
回答by konus
You could use the idea behind the jquery-nolinkplugin and do something like this:
您可以使用jquery-nolink插件背后的想法并执行以下操作:
$('new_link').attr("href", "javascript:void(0);");
回答by Siv
simply you can do this by adding "javascript:void(0);" as your 'href' value
只需添加“javascript:void(0);”即可完成此操作 作为你的“href”值
for example :-
例如 :-
<a href="javascript:void(0)" > some link </a>
or you can achive this using jQuery
或者你可以使用 jQuery 来实现
$('link-identifier').attr("href", "javascript:void(0);");
回答by Siv
Simple Way
简单的方法
Also There is a Simple way to do this
还有一个简单的方法可以做到这一点
that is by returning Boolean values..
那是通过返回布尔值..
example :
example :
<a href='#link' onClick='return false;' > Prevent Link </a>;
Using jquery to make it bit more interesting
使用 jquery 让它更有趣
$('a').click(function (){
//or if you want to perform some conditions
if(condition){
// your script
}
return false;
});
Hope it helps ?
希望能帮助到你 ?

