CODEWITHSUNDEEP
javascriptjqueryjquery-events
ilyes kooli
ilyes kooli

Reputation: 12043

preventDefault() doesn't prevent the action

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

Upvotes: 20

Views: 44835

Answers (5)

Игорь Елизаров
Игорь Елизаров

Reputation: 1

It have helped me

function goToAccessoriesPage(targert) {
       targert.onclick.arguments[0].preventDefault();
       ...
}

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

you can try this:

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

DEMO

Upvotes: 2

ThiefMaster
ThiefMaster

Reputation: 318498

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:

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

Upvotes: 40

Anders Marzi Tornblad
Anders Marzi Tornblad

Reputation: 19305

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.

Upvotes: 4

Thomas Jones
Thomas Jones

Reputation: 4962

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/

Upvotes: 4

Related Questions