What’s the effect of adding ‘return false’ to a click event listener?

What’s the effect of adding ‘return false’ to a click event listener?

Many times I’ve seen links like these in HTML pages:
Click here !

What’s the effect of the return false in there?
Also, I don’t usually see that in buttons.
Is this specified anywhere? In some spec in w3.org?

Solutions/Answers:

Solution 1:

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.

Solution 2:

You can see the difference with the following example:

<a href="http://www.google.co.uk/" onclick="return (confirm('Follow this link?'))">Google</a>

Clicking “Okay” returns true, and the link is followed. Clicking “Cancel” returns false and doesn’t follow the link. If javascript is disabled the link is followed normally.

Solution 3:

Here’s a more robust routine to cancel default behavior and event bubbling in all browsers:

// Prevents event bubble up or any usage after this is called.
eventCancel = function (e)
{
    if (!e)
        if (window.event) e = window.event;
    else return;
    if (e.cancelBubble != null) e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    if (window.event) e.returnValue = false;
    if (e.cancel != null) e.cancel = true;
}

An example of how this would be used in an event handler:

// Handles the click event for each tab
Tabstrip.tabstripLinkElement_click = function (evt, context) 
{
    // Find the tabStrip element (we know it's the parent element of this link)
    var tabstripElement = this.parentNode;
    Tabstrip.showTabByLink(tabstripElement, this);
    return eventCancel(evt);
}

Solution 4:

WHAT “return false” IS REALLY DOING?

return false is actually doing three very separate things when you call it:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. Stops callback execution and returns immediately when called.

See jquery-events-stop-misusing-return-false for more information.

For example :

while clicking this link, return false will cancel the default behaviour of the browser.

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

Solution 5:

Retuning false from a JavaScript event usually cancels the “default” behavior – in the case of links, it tells the browser to not follow the link.

Solution 6:

I believe it causes the standard event to not happen.

In your example the browser will not attempt to go to #.