javascript - preventDefault() 不会阻止该操作

Question

当我在链接上使用 event.preventDefault() 时它起作用，但是当我在按钮上使用它时却不起作用!

DEMO

我的代码:

<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();
});

链接 Action 被取消，但是当我点击按钮时，仍然执行 onClick Action 。

有什么帮助吗？我想做的是阻止按钮 onClick 操作而不更改按钮 html(我知道该怎么做

$('#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');

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

如果您只是因为需要而不想删除处理程序，只需将其转换为正确附加的事件即可:

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