Question

Before I start writing huge swathes of code that don’t work I thought I’d ask this question.

event.preventDefault() only cancels the default action of the click event doesn’t it?

Theoretically I should be able to bind mutiple click event handlers in jQuery to a given target to perform different actions like Ajax posts and Google tracking.

Am I wrong?

Answer 1

event.preventDefault() only cancels the default action of the click event doesn’t it?

It cancels the browser’s default action of the event (not just the click event) (W3C docs, jQuery docs). So for instance, in the form submit event, it prevents the form being submitted by the browser. It doesn’t stop anything you’re doing in code, and it doesn’t stop bubbling; that’s what stopPropagation is for (W3C docs, jQuery docs).

So say you have a link in a div, and you have the click event hooked on both the link and the div. If the link’s event handler calls preventDefault, the browser won’t do its default action (following the link), but the event continues to bubble up the DOM to the link’s parent element, the div, and so you’ll see the event on your click handler there, too. Any actions you’re taking in code in either handler will be unaffected by your calling preventDefault.

In your comment below, you ask about multiple handlers on the same element. Neither preventDefault nor stopPropagation affects those, they’ll still get fired…unless you use stopImmediatePropagation, which tells jQuery to stop the event dead in its tracks (but doesn’t prevent the browser’s default action).

I should probably round this out by saying that if you return false from your event handler, that tells jQuery to prevent the default and stop bubbling. It’s just like calling preventDefault and stopPropagation. It’s a handy shortcut form for when your event handler is taking full control of the event.

So, given this HTML:

<div id='foo'><a href='http://stackoverflow.com'>Q&amp;A</a></div>

Example 1:

// Here we're preventing the default but not stopping bubbling,
// and so the browser won't follow the link, but the div will
// see the event and the alert will fire.
$("#foo").click(function() {
    alert("foo clicked");
});
$("#foo a").click(function(event) {
    event.preventDefault();
});

Example 2:

// Here we're stopping propagation and not preventing the default;
// the browser will follow the link and the div will not be given
// a chance to process the event (no alert, and more to the point,
// code in the div's handler can't prevent the default)
$("#foo").click(function() {
    alert("foo clicked");
});
$("#foo a").click(function(event) {
    event.stopPropagation();
});

Example 3 (you’ll only rarely see this):

// Here we're doing both, and so the browser doesn't follow the
// link and the div doesn't see the event (no alert).
$("#foo").click(function() {
    alert("foo clicked");
});
$("#foo a").click(function(event) {
    event.preventDefault();
    event.stopPropagation();
});

Example 4:

// Shorter version of Example 3, exactly the same effect
$("#foo").click(function() {
    alert("foo clicked");
});
$("#foo a").click(function() {
    return false;
});