Javascript preventDefault() 不起作用

preventDefault() doesn't work

提问by ilyes kooli

When I use event.preventDefault() on a link it works, however when I use it on a button doesn't!
DEMO
my code:

当我在链接上使用 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();
});

? Link action is cancelled, but when I click on the button, still executes the onClick action
Any help? what I want to do is to prevent the button onClick action without changing the button html(I know how to do

? 链接动作被取消，但是当我点击按钮时，仍然执行 onClick 动作 有
什么帮助吗？我想要做的是在不更改按钮 html 的情况下阻止按钮 onClick 操作（我知道该怎么做

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

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

回答by ThiefMaster

You want event.stopImmediatePropagation();if there are multiple event handlers on an element and you want to prevent the others to execute. preventDefault()just blocks the default action (such as submitting a form or navigating to another URL) while stopImmediatePropagation()prevents the event from bubbling up the DOM tree andprevents any other event handlers on the same element from being executed.

您想要event.stopImmediatePropagation();一个元素上是否有多个事件处理程序，并且您想阻止其他事件处理程序执行。preventDefault()只是阻止默认操作（例如提交表单或导航到另一个 URL），同时stopImmediatePropagation()防止事件在 DOM 树中冒泡，并防止执行同一元素上的任何其他事件处理程序。

Here are some useful links explaining the various methods:

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

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

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

However, since it still doesn't work it means that the onclick=""handler executes before the attached event handler. There's nothing you can do since when your code runs the onclickcode has already been executed.

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

The easiest solution is completely removing that handler:

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

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

Even adding an event listener via plain javascript (addEventListener()) with useCapture=truedoesn't help - apparently inline events trigger even before the event starts descending the DOM tree.

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

If you just do not want to remove the handler because you need it, simply convert it to a properly attached event:

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

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

回答by Thomas Jones

you need stopImmediatePropagationnot preventDefault. preventDefault prevents default browser behavior, not method bubbling.

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

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

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

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

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

回答by Anders Tornblad

The preventDefaultfunction does not stop event handlers from being triggered, but rather stops the default actiontaking place. For links, it stops the navigation, for buttons, it stops the form from being submitted, etc.

该preventDefault函数不会阻止事件处理程序被触发，而是阻止默认操作的发生。对于链接，它会停止导航，对于按钮，它会停止提交表单等。

What you are looking for is stopImmediatePropagation.

您正在寻找的是stopImmediatePropagation.

回答by thecodeparadox

you can try this:

你可以试试这个：

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

DEMO

演示

回答by Achraf El Hadi

change the element button and use the element input type submit and it will work

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