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!

— hannebaumsaway
fonte

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.

— Chris Brown
fonte

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!
}

— Terry
fonte

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>

Espandi lo snippet

— Husam Ebish
fonte