JavaScript: event.preventDefault() vs return false

Question

When I want to prevent other event handlers from executing after certain event is fired I can do one of those (jQuery examples, but this will work in JS in general):

#1 event.preventDefault()

$('a').click(function (e) {
    // custom handling here

    e.preventDefault();
});

#2 return false

$('a').click(function () {
    // custom handling here

    return false;
};

Is there any significant difference between those two methods of stopping event propagation?

For me returning false in simpler, shorter and probably you are less likely to make a typo while writing that then executing a method when you have to remember about correct casing, parenthesis etc. I don't have to assign first parameter in callback as well if I don't plan to use it in my code. But maybe there are some reason why I should avoid doing it like this and use preventDefault instead.

Answer 1

You can hang alot of functions on 'click' event for one element. I can you be sure false one will be the last one to fire? PreventDefault on the other hand will definitely prevent only default behavior of element.

Answer 2

I think

event.preventDefault()

is the w3c specified way of canceling events. You can read this in the w3c spec

Event cancelation

Also you can't use return false in every situation. When giving a javascript function in the href attribute and if you return false then the user will be redirected to a page with false string written.

Answer 3

return false is effectively both preventDefault and stopPropogation.

preventDefault will prevent the default event from occuring, stopPropogation will prevent the event from bubbling up and return false will do both.

Source: John Resig

http://www.mail-archive.com/[email protected]/msg71371.html

Answer 4

This is not, as you've titled it, a "JavaScript" question; it is a question regarding the design of jQuery, as indicated in Christoph's comment.

jQuery and the previously linked citation from John Resig (in karim79's message) seem to be the source misunderstanding of how event handlers in general work.

Fact: An event handler that returns false prevents the default action for that event. It does not stop the event propagation. Event handlers have always worked this way, since the old days of Netscape Navigator.

The following documentation from MDC explains how return false in an event handler works: https://developer.mozilla.org/en/XUL_Tutorial/More_Event_Handlers#Prevent_Default_Action

What happens in jQuery is not the same as what happens with event handlers. DOM event listeners and MSIE "attached" events are a different matter altogether.

For further reading, see attachEvent on MSDN and the W3C DOM 2 Events documentation.