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.