return false from jQuery click event

Question

I have click events set up like this:

$('.dialogLink')
    .click(function () {
        dialog(this);
        return false;
    });

The all have a "return false"

Can someone explain what this does and if it's needed?

Answer 1

When you return false from an event handler it prevents the default action for that event and stops the event bubbling up through the DOM. That is, it is the equivalent of doing this:

$('.dialogLink')
   .click(function (event) {
       dialog(this);
       event.preventDefault();
       event.stopPropagation();
});

If '.dialogLink' is an <a> element then its default action on click is to navigate to the href. Returning false from the click handler prevents that.

As for whether it is needed in your case, I would guess the answer is yes because you want to display a dialog in response to the click rather than navigating. If the element you've put the click handler on does not have a default action on click (e.g., normally nothing happens when you click a div) then you needn't return false because there's nothing to cancel.

If you want to do something in response to the click but let the default navigation continue then do not return false.

Further reading:

• event.preventDefault()
• event.stopPropagation()

Answer 2

The return value of an event handler determines whether or not the default browser behaviour should take place as well. In the case of clicking on links, this would be following the link, but the difference is most noticeable in form submit handlers, where you can cancel a form submission if the user has made a mistake entering the information.

I don't believe there is a W3C specification for this. All the ancient JavaScript interfaces like this have been given the nickname "DOM 0", and are mostly unspecified. You may have some luck reading old Netscape 2 documentation.

The modern way of achieving this effect is to call event.preventDefault(), and this is specified in the DOM 2 Events specification.

So the right way would be:

$('.dialogLink')
   .click(function (e) {
       dialog(this);
       e.preventDefault();
       e.stopPropagation(); // Stop bubbling up
});