PT
RU
EN
ES
ZH
FR
DE
AR
HI
# ou javascript:void(0): o que escolher para links JavaScript? Explicação completa com código
Olá, colega desenvolvedor! Se você já escreveu links que não levam a uma nova página, mas executam código JavaScript (por exemplo, abrir uma janela modal, carregar conteúdo ou executar uma animação), certamente já enfrentou o dilema: qual valor do atributo href usar? href="#" ou href="javascript:void(0)"?
Esta pergunta é um verdadeiro sucesso no Stack Overflow (milhares de visualizações!), e não é à toa. Parece um detalhe, mas disso depende o comportamento da página: se ela vai rolar para cima, se um hash aparecerá na URL, se funcionará em navegadores antigos. Vamos entender de uma vez por todas qual abordagem é melhor e por que a resposta "correta" não é tão simples.
O problema: por que mudar o href?
Imagine: você escreve um botão que abre um menu:
<a href="#" onclick="openMenu(); return false;">Menu</a>Ou assim:
<a href="javascript:void(0)" onclick="openMenu();">Menu</a>Ambas as opções "funcionam", mas cada uma esconde surpresas. Vamos compará-las por critérios-chave.
Opção 1: href="#" — o clássico com pegadinha
# é um link para o "topo" da página. Se você simplesmente escrever <a href="#">, o navegador rolará a página para cima. Para evitar isso, é necessário adicionar return false; no manipulador:
<a href="#" onclick="doSomething(); return false;">Clique em mim</a>Vantagens:
- Acessibilidade: o link permanece focalizável (pode ser acessado com Tab).
- Semântica: para leitores de tela, ainda é um link (embora não leve a lugar nenhum).
- Simplicidade: fácil de lembrar, escreve-se rapidamente.
Desvantagens:
- Rolagem para cima: se esquecer o
return false, o usuário perderá a posição. - Alteração da URL: adiciona
#na barra de endereços (às vezes indesejável). - Histórico do navegador: cria um registro no histórico (o botão "Voltar" levará à página anterior com "#").
Opção 2: href="javascript:void(0)" — um hack de tempos antigos
javascript:void(0) é um pseudoprotocolo JavaScript. Ele diz ao navegador: "execute o código void(0) e não siga o link". void(0) retorna undefined, então a página não se move.
<a href="javascript:void(0)" onclick="doSomething();">Clique em mim</a>Vantagens:
- Não rola a página — nenhum
return falseé necessário. - Não altera a URL — o hash não é adicionado.
Desvantagens:
- Problemas de acessibilidade: alguns leitores de tela antigos podem "tropecar" no
javascript:no href. - Violação dos princípios de melhoria progressiva: se o JavaScript do usuário estiver desabilitado, o link não funciona (leva ao vazio).
- HTML inválido? Formalmente,
javascript:é um protocolo não padrão, mas os navegadores o entendem. No entanto, o validador W3C pode reclamar. - Depuração mais difícil: se houver um erro no href, o navegador pode se comportar de forma imprevisível.
