CSS JavaScript

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

21 de setembro de 2020

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

como impedir click em link javascript capa

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

 

0
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x