event.preventDefault() vs return false: Como não quebrar seu JavaScript

Introdução: Por que este tópico explode no Stack Overflow?

Se você já escreveu em JavaScript um manipulador de clique em um link ou envio de formulário, provavelmente já se deparou com uma situação em que o navegador faz algo por conta própria, ignorando sua lógica. Você escreve alert('Olá!') ao clicar em um link, mas o navegador insiste em ir para outra página. Familiar?

É aqui que entram em cena dois métodos lendários: event.preventDefault() e return false. A pergunta "Qual escolher?" é uma das mais populares no Stack Overflow, com dezenas de milhares de visualizações. E não é à toa: a diferença entre eles é crítica, e a escolha errada pode levar a bugs difíceis de encontrar.

Neste artigo, vamos entender de uma vez por todas:

\n
• O que é "ação padrão" no navegador
\n
• Como ambos os métodos funcionam
\n
• A principal diferença que quebrou o código de milhares de desenvolvedores
\n
• Quando usar cada um deles
\n
• Por que return false nem sempre é ruim
\n

Prontos? Vamos lá!

1. O que é "ação padrão"?

Antes de falar sobre os métodos, vamos entender o que estamos cancelando. O navegador é uma máquina inteligente com comportamentos embutidos para muitos elementos HTML:

\n
• Link (<a>): por padrão, navega para o endereço do atributo href.
\n
• Formulário (<form>): por padrão, envia os dados para o servidor e recarrega a página.
\n
• Botão de envio (<input type="submit">): envia o formulário.
\n
• Menu de contexto (clique direito): exibe o menu do navegador.
\n

Às vezes, esse comportamento é necessário — por exemplo, quando o usuário realmente quer navegar por um link. Mas frequentemente queremos interceptar essa ação e executar nossa própria lógica: validar o formulário antes do envio, abrir o link em uma janela modal, exibir um menu de contexto personalizado.

É para isso que servem nossos heróis.

2. event.preventDefault() — o método elegante

Este é um método do objeto de evento (event). Ele faz exatamente uma coisa: cancela a ação padrão do navegador.

// Exemplo 1: Cancelar a navegação de um link\ndocument.querySelector('a').addEventListener('click', function(event) {\n    event.preventDefault();\n    alert('O link não funcionou! Eu o cancelei.');\n});\n\n// Exemplo 2: Cancelar o envio de um formulário\ndocument.querySelector('form').addEventListener('submit', function(event) {\n    event.preventDefault();\n    // Agora o formulário não recarregará a página\n    // Podemos fazer uma requisição AJAX ou validação\n    console.log('Formulário não enviado. Verificando dados...');\n});\n

Observe: preventDefault() não interrompe a propagação do evento. Se você tiver manipuladores aninhados, o evento continuará "subindo" pela árvore DOM.

Isso é importante entender: se você quiser cancelar a ação e também interromper a propagação, precisará chamar ambos os métodos: preventDefault() e stopPropagation().

3. return false — um amigo antigo, mas perigoso

Já o return false é uma fera mais complexa. Tudo depende de como exatamente você adiciona o manipulador.

Caso 1: Atributos HTML (onclick)

Nos tempos antigos (e ainda em código legado), os manipuladores eram colocados diretamente no HTML:

<a href="https://example.com" onclick="return false;">Clique em mim</a>\n\n<form onsubmit="return validateForm();">\n    <input type="submit" value="Enviar">\n</form>\n\n<script>\nfunction validateForm() {\n    // Se retornar false — o formulário não será enviado\n    // Se true — será enviado\n    return false;\n}\n</script>\n

Em