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

Asked

Viewed 2,397 times

24

Why the return false prevails over, for example, a href?

We have as an example this code:

<!DOCTYPE html>
<html>
    <head>
        <title>Uma página linda</title>
    </head>
    <body>
        <a href="http://stackoverflow.com/" onclick="return false;" title="Link pra stackoverflow" target="_blank">Melhor site de todos (Stackoverflow)</a>
    </body>
</html>

When clicked, in this case, nothing would happen due to the return false.

But why is that?

Why clicking the link does not "work"?

javascript html

  • Interesting article on the subject (in English): http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

3 answers

13


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

It was defined in the specification (I believe) that this code would define whether the normal click action would still be executed 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 do not need to return something specific for the normal action to occur) the normal action is still executed after the action of this code, but returning false the normal action is deleted. It is considered that everything that should be done is already done by the code.

It is a useful convention established to give more flexibility. It is only 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 "function" always after you do an action. Eventually you would have repeat action or conflicting actions.

Example:

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

I put in the Github for future reference.

Today it is possible to use something more modern as the Event.preventDefault.

9

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

I will complement here with some technical details. To be less heavy, I tried to arrange them in list form.

  • To specification distinguishes between Event handlers and Event listeners. The handlers are added directly in HTML, as in your example, or via Javascript by syntax elemento.onevento = function(){};. There is only one Handler by element. The listeners are added with addEventListener, and there may be more than one per element.

  • This behavior of return false; actually serves to prevent the standard action of the element, and only works in Event handlers, never in Event listeners.

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

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

  • This also explains why this doesn’t 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:

    1. Execute the method preventDefault of the event object passed to the Listener.
    2. Set the property returnValue of that same object to false.

1

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.