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!

html css mobile scroll touch Hannebaumsaway
fonte

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.

Chris Brown
fonte
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!
}
Terry
fonte
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>
Expandir trecho

Husam Ebish
fonte