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

链接动作被取消，但是当我单击按钮时，仍执行onClick动作。

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

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

Answer 1

如果一个元素上有多个事件处理程序，并且希望阻止其他事件处理程序执行，则需要event.stopImmediatePropagation();。 preventDefault()仅阻止默认操作（例如，提交表单或导航到另一个URL），而stopImmediatePropagation()阻止事件冒泡DOM树and阻止执行同一元素上的任何其他事件处理程序。

这里有一些有用的链接，解释了各种方法：

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

但是，由于仍然无法使用，这意味着onclick=""处理程序将在附加的事件处理程序之前执行。自从代码运行onclick代码以来，您就无能为力了。

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

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

即使使用addEventListener()通过普通javascript（addEventListener()）添加事件侦听器也无济于事-显然，即使事件开始向DOM树下降，内联事件也会触发。

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

useCapture=true

Answer 2

您需要

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

而不是stopImmediatePropagation。 preventDefault防止默认的浏览器行为，而不是方法冒泡。

preventDefault

http://api.jquery.com/event.stopImmediatePropagation/

Answer 3

http://api.jquery.com/event.preventDefault/函数不会停止事件处理程序的触发，而是停止默认动作的发生。对于链接，它将停止导航，对于按钮，将停止提交表单，等等。

您正在寻找的是preventDefault。

Answer 4

您可以尝试以下方法：

stopImmediatePropagation

$('#button').show(function() {
  var clickEvent = new Function($(this).attr('click')); // store it for future use
  this.onclick = undefined;
});

Answer 5

更改元素按钮并使用元素输入类型Submit，它将起作用