CSS HTML JavaScript

Como impedir um click sobre um link (tag a do HTML)

14 de abril de 2020

Como impedir um click sobre um link (tag a do HTML)

Neste artigo vamos aprender como impedir um click sobre um link, conhecido também como tag a do HTML, que utilizamos para redirecionar o usuário.

impedir click na tag a capa

Fala programador(a), beleza? Bora aprender mais coisa nova! 🙂

Temos dois métodos eficazes para retirar o efeito de click de um link ou tag a, como preferir

Um deles é com CSS puro, porém devemos ficar ciente que não é suportado por alguns (bem poucos) navegadores

Veja este link para consulta de onde não é possível utilizar

E a outra maneira é via JavaScript, que é suportada por todos os browsers, então a escolha é sua

Vamos ver os dois casos em exemplos práticos

Segue o exemplo de CSS para impedir um click sobre um link:

a {
  pointer-events: none;
}

Utilizando a regra pointer-events, podemos remover o evento de click na âncora, fazendo com que não redirecione mais o usuário ao clicar

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Precisamos apenas setar o valor none, adicionando esta regra ao elemento que necessitamos

Veja agora a versão de JavaScript:

let link = document.getElementById('link');

link.addEventListener('click', function(event){
    event.preventDefault();
});

Neste exemplo encapsulamos o elemento em uma variável, utilizando o método getElementById

E então vinculamos um evento de click com addEventListener, e prevenimos o comportamento default (mudar de URL) com o event.preventDefault()

Assim o link não funcionará mais com o seu evento padrão

E podemos atrelar qualquer outro tipo de comportamento via JavaScript

Conclusão

Neste artigo vimos duas formas de impedir um click sobre um link, que é o evento padrão da tag a do HTML

Primeiro vimos com CSS, utilizando o pointer-events com none

E a segunda possibilidade foi com JavaScript, através de um evento do click, adicionando um preventDefault no evento padrão

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

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