54

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?

1 Resposta 1

67

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.

4
  • Olá, Rodrigo. Então, já li essa resposta também, entendo que o comportamento deles é diferente, o que não está claro é o resultado de cada um, por isso pedi exemplos. Você poderia dar exemplos de quando é útil usar só stopPropagation ou só preventDefault?
    – elias
    Commented 12/12/2013 às 11:11
  • 2
    @elias, adicionei um exemplo. Ficou mais claro?
    – rodrigorgs
    Commented 12/12/2013 às 11:35
  • Boa, ficou bem mais claro! Valeu! =)
    – elias
    Commented 12/12/2013 às 11:44
  • Explicação perfeita! Commented 13/12/2013 às 13:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .