Hacer que no se pueda hacer clic en el elemento (haga clic en las cosas detrás de él)

92

Tengo una imagen fija que se superpone a una página cuando el usuario está desplazando una pantalla táctil (móvil).

Quiero hacer que esa imagen sea "inactiva" o "inactiva" o lo que sea, de modo que si un usuario toca y arrastra desde esa imagen, la página detrás de ella todavía se desplaza como si la imagen no estuviera "bloqueando" la interacción.

es posible? Si es necesario, podría intentar proporcionar capturas de pantalla que ejemplifiquen lo que quiero decir.

¡Gracias!

html css mobile scroll touch Hannebaumsaway
fuente

Respuestas:

181

Configuración de CSS: pointer-events: nonedebería eliminar cualquier interacción del mouse con la imagen. Compatible bastante bien en todos menos en IE.

Aquí hay una lista completa de valores que pointer-eventspuede tomar.

Chris Brown
fuente
2
¡Perfecto! No me había cruzado pointer-eventsantes, esto es exactamente lo que estaba buscando. ¡Gracias!
hannebaumsaway
1
@Dusty Un poco tiene sentido, está deshabilitando las interacciones del mouse pero desea interacciones del mouse. ¿Cuál es su caso de uso específico? Desde una perspectiva de UX que parece contraria a la intuición, ya que el puntero implica que se puede hacer clic en el elemento. Si juntas un JSFiddle, puedo echar un vistazo.
Chris Brown
@ChrisBrown, el cambio de cursor fue un pequeño empujón. Aquí hay un poco de lo que se me ocurrió con jsfiddle.net/cxwvdos0 Un poco loco solo para deshabilitar un botón por un segundo y no hacer que el cursor cambie. jQuery unbindy bindcreo que habría funcionado si quisiera convertir mis funciones anónimas. ¡Gracias por la respuesta!
Dusty
no funciona en dispositivos móviles.
Hamendra Sunthwal hace
17

Eventos de puntero CSS es lo que desea ver. En su caso, establezca pointer-events en "none". Mire este JSFiddle para ver un ejemplo ... http://jsfiddle.net/dppJw/1/

Tenga en cuenta que al hacer doble clic en el icono, seguirá diciendo que hace clic en el párrafo.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
}
Terry
fuente
1
¡Gracias por el ejemplo!
hannebaumsaway
Un solo clic *, y el ejemplo de código (hacer clic en el icono) no me funciona en FF 68.0.
Andrew
3

Si desea utilizar 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 fragmento

Husam Ebish
fuente