preventDefault() doesn't prevent the action

javascript, jquery, jquery-events

Solution

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

Problem

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

Original source