HTML: What's the effect of adding 'return false' to an onclick event ?

Question

Many times I've seen links like these in HTML pages:

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

What's the effect of the return false in there ?

Also, I don't usually see that in buttons.

Edit: Is this specified anywhere ? In some spec in w3.org ?

Answer 1

I believe it causes the standard event to not happen.

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

Answer 2

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.

Answer 3

Return false will prevent navigation. Otherwise, the location would become the return value of someFunc

Answer 4

The return false is saying not to take the default action, which in the case of an is to follow the link. When you return false to the onclick, then the href will be ignored.

Answer 5

using return false in an onclick event stops the browser from processing the rest of the execution stack, which includes following the link in the href attribute.

In other words, adding return false stops the href from working. In your example, this is exactly what you want.

In buttons, it's not necessary because onclick is all it will ever execute -- there is no href to process and go to.

Answer 6

Browser hack: http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

Answer 7

Return false will stop the hyperlink being followed after the javascript has run. This is useful for unobtrusive javascript that degrades gracefully - for example, you could have a thumbnail image that uses javascript to open a pop-up of the full-sized image. When javascript is turned off or the image is middle-clicked (opened in a new tab) this ignores the onClick event and just opens the image as a full-sized image normally.

If return false were not specified, the image would both launch the pop-up and open the image normally. Some people instead of using return false use javascript as the href attribute, but this means that when javascript is disabled the link will do nothing.

Answer 8

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.

Answer 9

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

Answer 10

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.

Answer 11

And the practical problem in leonel's example is that if the current page is scrolled down some way it will jump to top without the return false;