22

No caso de um link:

<a href="http://www.google.com">Google</a>

ou no caso de outro elemento que tenha um evento amarrado com addEventListener, que alternativas existem para evitar que o conteudo seja "clicado" e que isso despolete uma ação como seguir um link, abrir um select ou outra ação configurada por javascript?

4 Respostas 4

23

Uma variante é via CSS, usando pointer-events.

Descobrí esta maneira somente esta semana. Daí o post aqui.

Assim usando no CSS pointer-events: none; os cliques do mouse serão ignorados. Esta alternativa é +/- recente sendo que é suportada em elementos HTML por browsers mais modernos ( IE11+, Firefox 3.6+, Chrome 2.0+, Safari 4+).

Exemplo
adicionando e removendo uma classe com este CSS pointer-events: none;

Para além deste método CSS que é o mais limpo, pode obter-se o mesmo efeito usando Javascript:

No caso se ser uma tag <a>, <select> e outras tags que têm predefenido um comportamento para quando recebem um clique é preciso adicionar/amarrar um event handler para poder cancelar/parar o clique.

Via javascript existem algumas alternativas. Usando o .preventDefault() que como o nome em Inglês indica previne o comportamento por defeito.

Exemplo:

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

Outra opção é impedir o clique com javascript criando uma variável para interceptar ou não o evento:

Assim define-se primeiro a variável e depois coloca-se um verificação do estado/valor da variável dentro da função chamada pelo click:

var bloqueado = true;
// dentro da função chamada pelo evento `click`
if (bloqueado) return false;

Exemplo

Outra opção é remover o evento amarrado. Note-se que esta opção não se aplica a tags como <a>, <select> e outras que têm um comportamento nativo/pré-defenido quando recebem um clique.

Pode também usar um elemento DOM para bloquear o clique.

Uma ultima opção sugerida aqui é bloquear esse elemento com outro elemento. Usando o z-index é possivel sobrepôr um outro elemento, neste caso transparente para sem o utilizador se aperceber (e sem estragar o layout) sobrepôr este elemento que se quere "proteger" de cliques, ou outra interação. Note-se que esta opção impede por exemplo de selecionar texto e outros eventos em elementos que podem estar visíveis, ficando assim inacessíveis ao utilizador.

Exemplo

2
  • 2
    No caso do select, acho que só é possível impedir que ele abra com os pointer-events (belo achado!), ou sobrepondo outro elemento. Em âncoras, um preventDefault() teria o mesmo efeito, não?
    – bfavaretto
    Commented 23/01/2014 às 16:51
  • 1
    @bfavaretto, sim, também achei "um bom achado". Em relação a ancoras sim, exato. Não adicionei para não fazer a resposta mais complexa com alternativas. Mas na verdade estou a pensar como adicionar visto haver boa gente que tem argumentos válidos sobre a preferência por .preventDefault() em vez de return false;
    – Sergio
    Commented 23/01/2014 às 16:54
9

Geralmente eu costumo utilizar o evento preventDefault, via jQuery. Veja:

$('.elemento').on('click', function(e) {
    e.preventDefault();
    alert('Você clicou aqui e nada aconteceu!');
});
5

Usar o pointer-events é uma boa ideia se você não precisa dar suporte à versões anteriores do Internet Explorer, o que acredito não ser o caso.

Melhorando um pouco a versão do código postada pelo thiagonzalez e que funciona em todos os navegadores é:

$('.elemento').click(function(e){
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
});
1
  • +1 por usar tanto preventDefault como returnValue caso não tenha preventDefault. Commented 21/02/2014 às 20:06
0

Maneira diferente das anteriores, mas tambem serve para outros que não sejam links

const link = document.querySelector("a");
link.onmouseenter = ()=>{
link.style.pointerEvents = 'none';
};
<a href="http://www.google.com">Google</a>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .