Rendi l'elemento non cliccabile (fai clic sugli elementi dietro di esso)


92

Ho un'immagine fissa che si sovrappone a una pagina quando l'utente è nell'atto di scorrere un touch screen (mobile).

Voglio rendere quell'immagine "non cliccabile" o "inattiva" o qualsiasi altra cosa, in modo che se un utente tocca e trascina da quell'immagine, la pagina dietro di essa continua a scorrere come se l'immagine non fosse lì "bloccando" l'interazione.

È possibile? Se necessario, potrei provare a fornire schermate esemplificative di ciò che intendo.

Grazie!

Risposte:


181

Impostazione CSS: pointer-events: nonedovrebbe rimuovere qualsiasi interazione del mouse con l'immagine. Supportato abbastanza bene in tutti tranne IE.

Ecco un elenco completo dei valori che pointer-eventspossono essere utilizzati.


2
Perfetto! Non mi ero imbattuto pointer-eventsprima, questo è esattamente quello che stavo cercando. Grazie!
hannebaumsaway

1
@ Dusty Kinda ha senso, stai disabilitando le interazioni del mouse ma desideri interazioni con il mouse. Qual è il tuo caso d'uso specifico? Da una prospettiva UX che sembra controintuitiva poiché il puntatore implica che l'elemento è cliccabile. Se metti insieme un JSFiddle posso dare un'occhiata.
Chris Brown,

@ChrisBrown il cambio del cursore era un po 'spinto. Ecco un po 'di quello che ho trovato con jsfiddle.net/cxwvdos0 Un po' folle solo per disabilitare un pulsante per un secondo e non cambiare il cursore. jQuery unbinde bindpenso che avrebbe funzionato se avessi voluto convertire le mie funzioni anonime. Comunque grazie per la risposta!
Dusty il

non funziona sui dispositivi mobili.
Hamendra Sunthwal

17

Gli eventi puntatore CSS sono ciò che vuoi guardare. Nel tuo caso, imposta pointer-events su "none". Guarda questo JSFiddle per un esempio ... http://jsfiddle.net/dppJw/1/

Nota che facendo doppio clic sull'icona continuerai a dire che fai clic sul paragrafo.

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

1
Grazie per l'esempio!
hannebaumsaway

Clic singolo * e l'esempio di codice (facendo clic sull'icona) non funziona per me in FF 68.0.
Andrew

3

Se desideri utilizzare 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>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.