Torne o elemento não clicável (clique nos itens atrás dele)


90

Tenho uma imagem fixa que se sobrepõe a uma página quando o usuário está no ato de rolar uma tela de toque (celular).

Quero tornar essa imagem "não clicável" ou "inativa" ou qualquer outra coisa, de modo que, se um usuário tocar e sair dessa imagem, a página atrás dela ainda role como se a imagem não estivesse lá "bloqueando" a interação.

Isso é possível? Se necessário, posso tentar fornecer capturas de tela exemplificando o que quero dizer.

Obrigado!

Respostas:


177

Configurando CSS - pointer-events: nonedeve remover qualquer interação do mouse com a imagem. Suportado muito bem em todos, exceto no IE.

Aqui está uma lista completa de valores que pointer-eventspodem ser usados.


2
Perfeito! Eu não tinha cruzado pointer-eventsantes, isso é exatamente o que eu estava procurando. Obrigado!
hannebaumsaway

1
@Dusty Kinda faz sentido, você está desativando as interações do mouse, mas quer interações do mouse. Qual é o seu caso de uso específico? De uma perspectiva UX que parece contra-intuitiva, pois o ponteiro indica que o elemento é clicável. Se você montar um JSFiddle, posso dar uma olhada.
Chris Brown

@ChrisBrown a mudança do cursor estava um pouco empurrando. Aqui está um pouco do que eu criei com jsfiddle.net/cxwvdos0 Meio louco apenas para desativar um botão por um segundo e não ter o cursor mudado. jQuery unbinde bindeu acho que teria funcionado se eu quisesse converter minhas funções anônimas. Obrigado pela resposta!
Dusty

17

CSS Pointer Events é o que você deseja examinar. No seu caso, defina os eventos de ponteiro como "nenhum". Veja este JSFiddle para um exemplo ... http://jsfiddle.net/dppJw/1/

Observe que clicar duas vezes no ícone ainda dirá que você clicou no parágrafo.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
} 

1
Obrigado pelo exemplo!
Hannebaumsaway

Um único clique * e o exemplo de código (clicar no ícone) não funciona para mim no FF 68.0.
Andrew

3

Se você deseja usar JavaScript:

document.getElementById("x").style.pointerEvents = "none";
<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.