Javascript 如何防止 onclick 方法中的默认事件处理？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7056669/
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 event handling in an onclick method?
提问by coure2011
How to prevent default in an onclick method? I have a method in which I am also passing a custom value
如何防止 onclick 方法中的默认值？我有一个方法，我也在其中传递自定义值
<a href="#" onclick="callmymethod(24)">Call</a>
function callmymethod(myVal){
//doing custom things with myVal
//here I want to prevent default
}
回答by Linus Kleen
Let your callback return falseand pass that on to the onclickhandler:
让您的回调返回false并将其传递给onclick处理程序：
<a href="#" onclick="return callmymethod(24)">Call</a>
function callmymethod(myVal){
//doing custom things with myVal
//here I want to prevent default
return false;
}
To create maintainablecode, however, you should abstain from using "inline Javascript"(i.e.: code that's directly within an element's tag) and modify an element's behavior via an included Javascript source file (it's called unobtrusive Javascript).
但是，要创建可维护的代码，您应该避免使用“内联 Javascript”（即：直接位于元素标签内的代码）并通过包含的 Javascript 源文件（称为不显眼的 Javascript）修改元素的行为。
The mark-up:
标记：
<a href="#" id="myAnchor">Call</a>
The code (separate file):
代码（单独的文件）：
// Code example using Prototype JS API
$('myAnchor').observe('click', function(event) {
Event.stop(event); // suppress default click behavior, cancel the event
/* your onclick code goes here */
});
回答by Aamir Afridi
Try
尝试
<a href="#" onclick="callmymethod(24); return false;">Call</a>
回答by Wawa
In my opinion the answer is wrong! He asked for event.preventDefault();when you simply return false; it calls event.preventDefault();AND event.stopPropagation();as well!
在我看来答案是错误的！他问event.preventDefault();你什么时候简单返回false；它也调用event.preventDefault();AND event.stopPropagation();！
You can solve it by this:
你可以这样解决：
<a href="#" onclick="callmymethod(event, 24)">Call</a>
function callmymethod(e, myVal){
//doing custom things with myVal
//here I want to prevent default
e = e || window.event;
e.preventDefault();
}
回答by Andreas Karz
You can catch the event and then block it with preventDefault() -- works with pure Javascript
您可以捕获该事件，然后使用 preventDefault() 阻止它——使用纯 Javascript
document.getElementById("xyz").addEventListener('click', function(event){
event.preventDefault();
console.log(this.getAttribute("href"));
/* Do some other things*/
});
回答by Rafay
Just place "javascript:void(0)", in place of "#" in href tag
只需放置“javascript:void(0)”，代替 href 标签中的“#”
<a href="javascript:void(0);" onclick="callmymethod(24)">Call</a>
回答by Pixelomo
This worked for me
这对我有用
<a href="javascript:;" onclick="callmymethod(24); return false;">Call</a>
回答by Girdacio Pereira
You can use:
您可以使用：
event.stopPropagation();
event.stopPropagation();
回答by Vadzim
It would be too tedious to alter function usages in all html pages to return false.
将所有 html 页面中的函数用法更改为return false.
So here is a tested solution that patches only the function itself:
所以这是一个经过测试的解决方案，它只修补功能本身：
function callmymethod(myVal) {
// doing custom things with myVal
// cancel default event action
var event = window.event || callmymethod.caller.arguments[0];
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
return false;
}
This correctly prevents IE6, IE11 and latest Chrome from visiting href="#"after onclick event handler completes.
这正确地阻止了 IE6、IE11 和最新的 Chromehref="#"在 onclick 事件处理程序完成后访问。
Credits:
学分：
回答by Matix
If you need to put it in the tag. Not the finest solution, but it will work.
如果你需要把它放在标签中。不是最好的解决方案，但它会起作用。
Make sure you put the onclick event in front of the href. Only worked for my this way.
确保将 onclick 事件放在 href 之前。只为我这样工作。
<a onclick="return false;" href="//www.google.de">Google</a>
回答by h4mz4
Another way to do that is to use the eventobject inside the attribute onclick(without the need to add an additional argument to the function to pass the event)
另一种方法是使用event属性内的对象onclick（无需向函数添加额外的参数来传递事件）
function callmymethod(myVal){
console.log(myVal);
}<a href="#link" onclick="event.preventDefault();callmymethod(24)">Call</a>