Neste artigo você vai aprender como impedir um click sobre um link com JavaScript e ainda inserir um evento neste mesmo elemento
Fala programador(a), beleza? Bora aprender como cancelar ou impedir um click em uma tag a ou âncora com JavaScript.
Podemos ainda adicionar um outro evento neste mesmo link, após impedir o comportamento padrão de direcionamento para outra página
Para impedir que o link seja ativado no seu evento padrão devemos utilizar o método preventDefault no evento
Veja como é possível fazer isso:
el.addEventListener('click', function(e){
e.preventDefault();
});Aqui neste código o el é o elemento que adicionamos o evento, já o parâmetro e dentro da função é dado pelo JS para utilizarmos
Podemos por meio do parâmetro manipular algo que acontece neste evento padrão, e utilizando o método preventDefault conseguimos justamente eliminar o efeito padrão
E este efeito dos links é o famoso redirecionar a uma nova página
Outra informação importante é que agora podemos atrelar qualquer lógica a este evento de click na tag a, já que ela vai funcionar como qualquer outro elemento a partir da utilização deste código, legal né?
Bônus
Podemos cancelar eventos com CSS também, porém não será possível adicionar outros eventos por meio desta linguagem
Teremos a possibilidade só de desabilitar o redirecionamento do link ou tag a
Como fazemos isto? É simples, veja:
.elemento {
pointer-events: none;
}Apenas precisamos adicionar a regra de pointer-events com o valor de none no elemento alvo
E aí, da mesma forma como no JS, o evento padrão será cortado e o link não vai mais funcionar
Podendo você aplicar alguma outra lógica para o elemento
Conclusão
Neste artigo você aprendeu como impedir um click sobre um link
Podemos inserir um preventDefault em algum evento atrelado com JavaScript, esta é maneira mais comum
Pois você já insere um outro evento que o elemento precisa no mesmo método
E como bônus vimos como cancelar o click na tag de link com CSS também, utilizando a regra pointer-events
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube