preventDefault()不起作用

Question

当我在链接上使用event.preventDefault()时,它可以工作,但是当我在按钮上使用它时却没有!
演示
我的代码:

<a id="link" href="http://www.google.com">link</a>
<button id="button" onclick="alert('an alert')">button</button>?

$('#link').click(function(event){
  event.preventDefault();
});
$('#button').click(function(event){
  event.preventDefault();
});

链接操作被取消,但是当我单击按钮时,仍然执行onClick操作
任何帮助？我想要做的是在不更改按钮html的情况下阻止按钮onClick动作(我知道该怎么做

$('#button').removeAttr('onclick');

Answer 1

你想event.stopImmediatePropagation();,如果有一个元素的多个事件处理程序,并要防止其他人来执行.preventDefault()只是阻止默认操作(例如提交表单或导航到另一个URL),同时stopImmediatePropagation()防止事件冒泡DOM树并阻止同一元素上的任何其他事件处理程序被执行.

以下是一些解释各种方法的有用链接:

• http://api.jquery.com/event.preventDefault/
• http://api.jquery.com/event.stopPropagation/
• http://api.jquery.com/event.stopImmediatePropagation/

但是,由于它仍然不起作用,这意味着onclick=""处理程序在附加的事件处理程序之前执行.你的代码运行时onclick代码已经执行,你无能为力.

最简单的解决方案是完全删除该处理程序:

$('#button').removeAttr('onclick');

即使通过普通的javascript(addEventListener())添加事件监听useCapture=true器也无济于事 - 显然内联事件甚至在事件开始降序DOM树之前触发.

如果您只是因为需要而不想删除处理程序,只需将其转换为正确连接的事件:

var onclickFunc = new Function($('#button').attr('onclick'));
$('#button').click(function(event){
    if(confirm('prevent onclick event?')) {
        event.stopImmediatePropagation();   
    }
}).click(onclickFunc).removeAttr('onclick');