Qual a diferença de uso de return false, event.stopPropagation() e event.preventDefault()? – javascript jquery manipulador-de-evento

Num handler de evento do jQuery, pode-se usar return false, event.stopPropagation() e event.preventDefault() (ou combinações desses) para “cancelar a ação” do evento.

Sei que tem diferença no comportamento deles, mas sinceramente sempre que preciso fazer algo do tipo, começo com return false e vou na tentativa e erro, porque ainda não compreendo muito bem a diferença.

Já li em algum lugar que return false é a mesma coisa que acionar event.stopPropagation() e event.preventDefault() ambos e já li gente dizendo que não é bem assim.

Alguém pode explicar melhor como devo fazer pra decidir qual desses caras eu preciso, com exemplos?

Retornar false em um handler de evento do jQuery é a mesma coisa que chamar event.preventDefault() e event.stopPropagation() (onde event é o objeto recebido como parâmetro).

Então:

• event.preventDefault() impede que o evento padrão ocorra (ex.: seguir um link);
• event.stopPropagation() impede que o evento seja propagado para os handlers dos elementos DOM pais;
• return false faz as duas coisas (e ainda interrompe a execução do handler imediatamente, sem executar as instruções que vêm depois).

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

Por exemplo, suponha que você tem o seguinte trecho de HTML:

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

E agora você instala dois handlers:

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

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

Ao clicar no link, os dois handlers serão executados e logo depois você será redirecionado para a página “teste” (esse é o comportamento default de um link).

Usando apenas event.preventDefault()

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

Nesse caso, o event.preventDefault() impede de você ser redirecionado, mas o outro handler ainda será executado.

Usando apenas event.stopPropagation()

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

O segundo handler não será mais executado, mas você ainda será redirecionado.

Usando os dois ou com return false

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

Se, no entanto, você chamar event.preventDefault() e event.stopPropagation() (ou, equivalentemente, apenas retornar false), o primeiro handler de evento será chamado mas, no entanto, o evento não será propagado para o segundo handler.

Pensando nos casos mais comuns, o stopPropagation() é útil para links, que têm um comportamento padrão associado, mas nem tanto para texto puro (afinal, o navegador não faz nada especial quando você clica no texto).

O preventDefault() é útil quando você tem diversos handlers e quer que um elemento tenha um comportamento único, sem herdar o comportamento dos elementos onde ele está contido.