Como impedir um click sobre um link com JavaScript (tag a)

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