javascript – What is the difference between using return false, event.stopPropagation() and event.preventDefault()?

Question:

In a jQuery event handler , you can use return false , event.stopPropagation() and event.preventDefault() (or combinations of these) to "cancel action" on the event.

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

I've read somewhere that return false is the same thing as triggering event.stopPropagation() and event.preventDefault() both, and I've read people saying that's not quite right.

Can anyone better explain how I should go about deciding which of these guys I need, with examples?

Answer:

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

Then:

  • event.preventDefault() prevents the default event from occurring (eg following a link);
  • event.stopPropagation() prevents the event from being propagated to the parent DOM element handlers;
  • return false does both (and still stops execution of the handler immediately, without executing the instructions that follow).

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

When you click on the link, both handlers will be executed and shortly afterwards 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, event.preventDefault() prevents you from being redirected, but the other handler will still be executed.

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, however the event will not propagate to the second handler.

Thinking about the most common cases, stopPropagation() is useful for links, which have default behavior associated with them, but less so for plain text (after all, the browser doesn't do anything special when you click on the text).

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

Post Views: 0
Scroll to Top