19.04.2025

Trabalhando com os Atributos href e onClick no HTML: Ordem de Execução

Resumo Rápido

Para ativar uma função JavaScript sem seguir um link, você precisa combinar o atributo href com o manipulador de eventos onclick, ao mesmo tempo em que impede a ação padrão. Você pode fazer isso usando event.preventDefault() dentro da função onclick ou retornando false no atributo onclick. Veja um exemplo:

<a href="http://exemplo.com" onclick="event.preventDefault(); fazerAlgo();">Clique em mim</a>

<script>
function fazerAlgo() {
    // Ações a serem tomadas ao clicar
    alert('Botão clicado!');
}
</script>

Essa abordagem garante que apenas seu código JavaScript seja executado, impedindo que o link seja seguido.

Melhores Práticas: Trabalhando com onclick e href

Regra de Ouro: Não use JavaScript diretamente no HTML

Embora incorporar JavaScript nos elementos HTML possa parecer conveniente, essa abordagem é frequentemente criticada por falta de estrutura. Para melhor legibilidade e manutenção do seu código, recomenda-se vincular o evento click ao elemento <a> usando os métodos document.querySelector ou document.getElementById:

document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelector('a#meuLink').addEventListener('click', (e) => {
        e.preventDefault();
        fazerAlgo();
    });
});

Escolhendo: <a> vs <button>

Se uma transição de página não for pretendida ao clicar, considere usar a tag <button> estilizada para parecer um link, a fim de manter uma experiência do usuário contínua:

<button onclick="fazerAlgo()" class="link-button">Clique em mim</button>

Estilizar a tag <button> como um <a> é feito usando CSS.

Controle Manual de Navegação: Usando href após onclick

Você pode especificar que o código em onclick seja executado antes de navegar para href, controlando window.location:

<a href="http://exemplo.com" onclick="fazerLogicaPersonalizadaPrimeiro(event);">Clique em mim</a>

<script>
function fazerLogicaPersonalizadaPrimeiro(event) {
    event.preventDefault();
    console.log('Primeiro execute a lógica específica, depois navegue.');
    window.location.href = event.target.href;
}
</script>

Isso permite que você controle a sequência de ações: primeiro a lógica personalizada, depois a navegação do link.

Simplificando o Trabalho com jQuery

Com jQuery, lidar com cliques se torna ainda mais simples:

$('a#meuLink').on('click', function(e) {
    e.preventDefault();
    // Seu código aqui
});

jQuery torna o trabalho com eventos mais fácil.

Visualização

Você pode comparar o elemento <a> a um concierge (🎩):

| Tarefa   | Método                |
|----------|-----------------------|
| 🚶 Liderar | href="destino"    |
| 🎩 Assistir| onclick="função()"   |

Um concierge pode tanto liderar (via href) quanto assistir e depois liderar (via onclick).

🎩🚶 -> Leva a: destino  
🎩🎩 -> Primeiro assiste com: função(), depois lidera

Dessa forma, o <a> pode desempenhar uma função dupla, aprimorando a interação do usuário com o site.

Todos os Cenários: Lidando com Casos Especiais

Entendendo o Uso de "#"

Ao usar href="#", tenha cuidado, pois isso pode levar a uma rolagem indesejada para o topo da página. Lembre-se de evitar o comportamento padrão:

<a href="#" onclick="event.preventDefault(); fazerAlgo();">Clique em mim</a>

Prioridade para Acessibilidade: href Vazio

Links com valores de href vazios, como href="#" ou href="javascript:void(0)", podem levar a mal-entendidos para leitores de tela e usuários. É melhor usar <button> para ações que não envolvem navegação, em interesse de acessibilidade.

Mantenha-se Atualizado Sobre as Melhores Práticas do <a>

Fique atento às melhores práticas para o uso de elementos <a> e eventos onClick para garantir que seu HTML permaneça atual e em linha com as últimas tendências.

Recursos Úteis

1. <a>: Elemento Âncora - HTML: Linguagem de Marcação de Hipertexto | MDN — detalhes sobre o elemento âncora HTML e seus atributos.
2. Delegação de Eventos — fundamentos da delegação de eventos em JavaScript, uma abordagem importante para gerenciamento de eventos.
3. O Método preventDefault() — preventDefault(), essencial para gerenciar eventos em JavaScript.
4. javascript - Por que usar onClick() no HTML é uma má prática? - Stack Overflow — sobre por que onClick pode não ser a melhor escolha.
5. ARIA: Papel de Botão - Acessibilidade | MDN — sobre a importância da acessibilidade e o uso adequado do onClick.

Video

Navigation