What is the difference in the use of Return false, Event.stopPropagation() and Event.preventDefault()?

Question

Num Handler jQuery event, one can use return false, event.stopPropagation() and event.preventDefault() (or combinations thereof) to "cancel the action" of the event.

I know there’s a difference in their behavior, but honestly whenever I need to do something like, I start with return false and go in trial and error, because I still do not understand very well the difference.

I read somewhere that return false is the same thing as triggering event.stopPropagation() and event.preventDefault() both and I’ve read people saying it’s not like that.

Can someone explain better how to decide which of these guys I need, with examples?

Answer 1

Return false in a jQuery event Handler is the same thing as calling event.preventDefault() and event.stopPropagation() (where event is the object received as parameter).

So:

• event.preventDefault() prevents the default event from occurring (e.g.: following a link);
• event.stopPropagation() prevents the event from being propagated to the handlers of the parent DOM elements;
• return false does both (and even interrupts the execution of Handler immediately, without executing the instructions that come after).

(Source: https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false)

For example, suppose you have the following HTML snippet:

<div id="main">clique<a href="teste">aqui</a></div>

And now you install two handlers:

$('#main a').click(function(event) {
    alert('main a');
});

$('#main').click(function(event) {
    alert('main')
});

By clicking on the link, the two handlers will be executed and soon after you will be redirected to the "test" page (this is the default behavior of a link).

Using only Event.preventDefault()

$('#main a').click(function(event) {
    // impede o comportamento default (ir para página "teste")
    event.preventDefault();
    alert('main a');
});

In that case, the event.preventDefault() prevents you from being redirected, but the other Handler will still run.

Using only Event.stopPropagation()

$('#main a').click(function(event) {
    // impede de propagar o evento para os elementos pais (ex.: #main)
    event.stopPropagation();
    alert('main a');
});

The second Handler will no longer run, but you will still be redirected.

Using both or with Return false

$('#main a').click(function(event) {
    alert('main a');
    return false;
});

If, however, you call event.preventDefault() and event.stopPropagation() (or, equivalently, just return false), the first event Handler will be called but, however, the event will not be propagated to the second Handler.

Thinking of the most common cases, the stopPropagation() is useful for links, which have an associated default behavior, but not so much for plain text (after all, the browser does nothing special when you click on the text).

The preventDefault() is useful when you have several handlers and want an element to have a unique behavior, without inheriting the behavior of the elements where it is contained.