preventDefault() doesn't work

问题

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

<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

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

回答1:

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 and prevents any other event handlers on the same element from being executed.

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/

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 onclick code has already been executed.

The easiest solution is completely removing that handler:

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

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

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');

回答2:

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

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

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

回答3:

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

What you are looking for is stopImmediatePropagation.

回答4:

you can try this:

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

DEMO

来源：https://stackoverflow.com/questions/10432365/preventdefault-doesnt-work