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