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

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 (e.g. following a link);
• event.stopPropagation() prevents the event from being propagated to the parent DOM element handlers;
• return false does both (and still stops handler execution immediately, without executing the instructions that come then).

(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, 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 this case, 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, in however, the event will not be propagated to the second handler.

Thinking of the most common cases, 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).

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