Entenda o javascript:void(0) e sua relação com o elemento <a>

A +A −

Certamente, se você é desenvolvedor front-end já se deparou com com alguns documentos HTML utilizando o atributo href preenchido com o valor javascript:void(0) dessa forma dentro de um elemento <a>:

<a href="javaScript:void(0)">Clique em mim, mas nada acontecerás!</a>

Ao clicar no link você previne o comportamento de levar o usuário para outra página ou mesmo pular para o início do documento HTML se usar o # como valor do atributo, e dependendo de como está levando o desenvolvimento da sua aplicação, pode ser uma opção até você concretizar outras ações com aquele elemento de linkagem.

Quando clicado, a função JavaScript void é executada, que retorna undefined e não gera efeito na página. O propósito de usar javascript:void(0) como o valor de href é evitar que a página seja recarregada, movimentada até uma âncora e a URL não seja alterada quando o link for clicado e nenhuma ação precisa acontecer.

O que é o javascript: no JS?

Uma maneira de incorporar código JavaScript diretamente no documento HTML é utilizar o valor do atributo href de um hyperlink como o valor de um manipulador de eventos, como onclick.

Por exemplo, se você tem um link que precisa executar uma função JavaScript específica quando clicado, em vez de navegar para uma página diferente, você pode usar a pseudo URL javascript:

<a href="javascript:minhaFuncao()">Clique para executar a função!</a>

Quando o usuário clica no link, a função JavaScript minhaFuncao() será executada e o link não terá o comportamento de direcionar o usuário para outro lugar.

O que acontece se usar apenas o # no href do <a>?

Utlizar o # como valor do atributo href irá automaticamente influenciar no comportamento pós clique do elemento <a>, jogando o usuário para o topo do documento HTML, ou seja, movimentado sua tela para o início da página.

Se você utilizar o # com algum ID que nomeu qualquer seção, div, ou mesmo qualquer elemento HTML, o usuário ao clicar, srá levado até a posição dam página onde o elemento é referenciado.

Insights finais dos ratos

O javascript:void(0) é usado como uma maquiagem para evitar comportamentos padrões do HTML, especificamente no atributo href dos elementos de linkagem <a>. É importante notar que este método pode ser um risco de segurança, pois permite que códigos potencialmente maliciosos sejam executados no computador do usuário, por isso deve ser usado com cautela.

Ah.. e tem uma outra informação que as ferramentas de análise de semântica e acessibilidade vão ficar reportando que o link não tem uma “âncora”.

Se for usar, use com cautela, mas minha recomendação é evita o uso de <a> e a jutilização de outras tags como <button>, ou mesmo um <span>.