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.

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