Why does "return false;" in a click event cancel the link opening?

It's not a matter of prevailing. What happens when you click the link is what is triggered in the event. This event only calls a code that must execute what the programmer wants. In this case the event is called onclick and is associating with a href . The code can do whatever you want there. In case he does nothing.

It was defined in the specification (I believe) that this code would define whether the normal click action would still be performed or not based on the return of a boolean provided by this code executed by the event. So if the code returns a true (if I am not mistaken it does not need to return something specific for normal action to occur) normal action is still executed after this code action, but returning false normal action is suppressed. It is considered that everything that should be done is already done by the code.

This is a useful convention designed to give you more flexibility. It's just a simple decision that is made by engine based on pre-established rules. Imagine how difficult it would be to perform certain tasks if the link always works after you take action. Eventually you would have repetition of conflicting action or actions.

Example:

<a href="http://www.pt.stackoverflow.com/" onclick="return (confirm('Pode seguir o link?'))">SOpt</a>

Today you can use something more modern like event.preventDefault .

The @bigown already gave a good general explanation, it's the same thing: it was agreed that return false cancels the default behavior of the element (in the case of clicking an anchor, follow the link set in href , but there are other examples in other elements, such as unsubscribing a form.)

I will complement here with some technical details. To make it less cumbersome, I tried to organize them in list form.

• A specification distinguishes between event handlers and event listeners . Handlers are added directly to the HTML, as in your example, or via JavaScript by elemento.onevento = function(){}; syntax. There is only one handler per element. Listeners are added with addEventListener , and there may be more than one per element.

• This behavior of return false; is actually to prevent the default action of the element, and only works on event handlers , never on event listeners .

• JS code "loose" inside a handler created via HTML is always implicitly wrapped in a function, and this function becomes handler . Since return only makes sense in functions, this explains why it works in examples like this:

  <a href="#" onclick="return false;">teste</a>
  

• This also explains why this does not work (consider retornaFalse as a function that returns false ):

  <a href="#" onclick="retornaFalse();">teste</a>
  

  ... but this works:

  <a href="#" onclick="return retornaFalse();">teste</a>    
  

• When using listeners , there are two ways to cancel the event:

• Execute method preventDefault of event object passed to listener .
• Set the returnValue property of that same object to false .

I'm not a champion of javascript, but as far as I know the default behavior is: run the onclick function and then follow the unless link that onclick returns false.

Based on this question: link