Prevenindo o comportamento padrão: não deixar o navegador fazer o que ele faria normalmente

Em muitos elementos da página, o navegador já vem com um comportamento “automático”.

Exemplos:

• um link <a> abre outra página
• um formulário <form> recarrega/enviar a página ao clicar em “Enviar”
• clique direito abre menu de contexto

Às vezes isso é ótimo.
Mas em outros casos, você quer controlar isso com JavaScript.

É aí que entra o preventDefault().

O que é preventDefault()?

preventDefault() é um método do objeto Event que impede a ação padrão do navegador para aquele evento.

Analogia simples:
o navegador está prestes a “agir no piloto automático”, e você diz:
“calma, dessa vez eu vou decidir o que acontece”.

Exemplo 1: formulário sem recarregar a página

Comportamento padrão de submit: recarregar/enviar a página.

<form id="formLogin">
  <input type="text" placeholder="Usuário">
  <button type="submit">Entrar</button>
</form>
<p id="status"></p>

const formLogin = document.getElementById("formLogin");
const status = document.getElementById("status");

formLogin.addEventListener("submit", function (e) {
  e.preventDefault(); // impede o envio padrão
  status.textContent = "Formulário validado com JavaScript!";
});

Aqui, o formulário não recarrega a página.
Você ganha tempo para validar campos, mostrar mensagens e só depois decidir o que fazer.

Exemplo 2: impedir navegação de link

<a id="meuLink" href="https://example.com">Ir para site</a>
<p id="msg"></p>

const meuLink = document.getElementById("meuLink");
const msg = document.getElementById("msg");

meuLink.addEventListener("click", function (e) {
  e.preventDefault(); // impede abrir o link
  msg.textContent = "Navegação bloqueada para confirmação.";
});

Muito útil quando você quer confirmar ação antes de sair da página.

Quando usar preventDefault()?

Use quando você precisa de controle antes da ação padrão, por exemplo:

• validar formulário antes de enviar
• confirmar clique em link externo
• bloquear ações temporariamente
• criar experiência customizada

Quando não usar em excesso?

Se você bloquear tudo sem necessidade, a página pode ficar estranha para o usuário.
Use com propósito claro.

Boa prática:

• aplique somente onde faz sentido
• mostre feedback ao usuário (mensagem, alerta visual)
• mantenha navegação previsível

Diferença rápida: preventDefault() x stopPropagation()

• preventDefault() → impede a ação padrão do navegador.
• stopPropagation() → impede o evento de “subir” para elementos pais.

São coisas diferentes, mas podem aparecer juntas em alguns cenários.

Resumo da lição

• Alguns elementos têm ações padrão no navegador.
• e.preventDefault() impede essa ação automática.
• Casos clássicos: submit de formulário e clique em link.
• Use com equilíbrio para manter boa experiência do usuário.
• Essa técnica é essencial para interfaces mais controladas e inteligentes.