Neste artigo você vai ver as diferenças para o valor do atributo href para links em JavaScript – devemos utilizar “#” ou “javascript:void(0)”?
Conteúdo também disponível em vídeo:
Fala programador(a), beleza? Bora aprender mais sobre o atributo href para links e o valor dele com JavaScript!
As duas abordagens tem alguns problemas, que vamos discutir mais tarde, e devem ser evitadas
Veja os exemplos:
<a href="#">Clique em mim!</a> <a href="javascript:void(0)">Clique em mim!</a>
Os problemas destas abordagens são:
- O código fica difícil de manter, por conter código inline;
- O javascript:void(0) não permite que usuário abra o link em nova aba;
- O # funciona como uma âncora, voltando o usuário par ao topo da página;
O que pode ser feito então?
A tag button é uma ótima forma de contornar isso, pois você pode atrelar a um evento de clique a sua função de JS que colocaria em um link
Além de que qualquer elemento pode ter seu CSS alterado para que atinja as necessidades do layout, fazendo então desnecessário o uso de uma tag a com href
Ou também o que pode ser feito é a remoção do atributo href, utilizando apenas o elemento como um disparador de outro evento em JS
Porém a ideia principal é não utilizar um handler inline, ou seja, separe o evento do HTML para um arquivo de JavaScript
E caso seja possível faça o uso de um elemento adequado, para que não precise ‘burlar’ o funcionamento padrão de um elemento, como a tag a
Conclusão
Neste artigo vimos por que não devemos utilizar o Atributo href para links em JavaScript com valores como # ou javascript:void(0)
O código ficará pior para manutenção, com mudança de comportamento padrão de um elemento e também event handler inline
A abordagem mais correta seria adicionar uma outra tag, que não seja necessário colocar valores inválidos em seus atributos
E criar os eventos todos na seção de JS do site ou arquivo externo, com foco apenas para esta ação
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube