Buat elemen tidak dapat diklik (klik hal-hal di belakangnya)

92

Saya memiliki gambar tetap yang menutupi halaman saat pengguna sedang menggulir layar sentuh (seluler).

Saya ingin membuat gambar itu "tidak dapat diklik" atau "tidak aktif" atau apa pun, sehingga jika pengguna menyentuh dan menyeret dari gambar itu, halaman di belakangnya masih menggulir seolah-olah gambar itu tidak ada "memblokir" interaksi.

Apakah ini mungkin? Jika perlu, saya dapat mencoba memberikan tangkapan layar yang mencontohkan apa yang saya maksud.

Terima kasih!

html css mobile scroll touch hannebaumsaway
sumber

Jawaban:

182

Setting CSS - pointer-events: noneharus menghilangkan interaksi mouse dengan gambar. Didukung dengan cukup baik di semua kecuali IE.

Berikut daftar lengkap nilai yang pointer-eventsdapat diambil.

Chris Brown
sumber
2
Sempurna! Saya belum pernah bertemu pointer-eventssebelumnya, inilah yang saya cari. Terima kasih!
hannebaumsaway
1
@Dusty Kinda masuk akal, Anda menonaktifkan interaksi mouse namun menginginkan interaksi mouse. Apa kasus penggunaan spesifik Anda? Dari perspektif UX yang tampaknya berlawanan dengan intuisi karena penunjuk menunjukkan bahwa elemen dapat diklik. Jika Anda membuat JSFiddle, saya bisa melihatnya.
Chris Brown
@Rrisky, perubahan kursor sedikit berdesak-desakan. Inilah sedikit dari apa yang saya dapatkan dengan jsfiddle.net/cxwvdos0 Agak gila hanya dengan menonaktifkan tombol selama satu detik dan kursor tidak berubah. jQuery unbinddan bindsaya pikir akan berhasil jika saya ingin mengubah fungsi anonim saya. Terima kasih atas tanggapannya!
Dusty
tidak berfungsi di perangkat seluler.
Hamendra Sunthwal
17

CSS Pointer Events adalah apa yang ingin Anda lihat. Dalam kasus Anda, setel peristiwa penunjuk ke "tidak ada". Lihat JSFiddle ini sebagai contoh ... http://jsfiddle.net/dppJw/1/

Perhatikan bahwa mengklik dua kali pada ikon akan tetap menyatakan Anda mengklik paragraf.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
}
Terry
sumber
1
Terima kasih atas contohnya!
hannebaumsaway
Mengklik tunggal *, dan contoh kode (mengklik ikon) tidak berfungsi untuk saya di FF 68.0.
Andrew
3

Jika Anda ingin menggunakan 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>
Luaskan cuplikan

Husam Ebish
sumber