Pointer-peristiwa - Trik CSS | CSS Almanak 2024

The pointer-eventsproperti memungkinkan kontrol atas bagaimana elemen HTML merespon mouse / sentuhan peristiwa - termasuk CSS melayang / negara yang aktif, klik / peristiwa keran di Javascript, dan apakah atau tidak kursor terlihat.

.avoid-clicks ( pointer-events: none; )

Meskipun pointer-eventsproperti mengambil sebelas kemungkinan nilai, semua kecuali tiga di antaranya dicadangkan untuk digunakan dengan SVG. Tiga nilai yang valid untuk setiap elemen HTMl adalah:

none mencegah semua opsi klik, status, dan kursor pada elemen HTML yang ditentukan
automengembalikan fungsionalitas default (berguna untuk digunakan pada elemen anak dari sebuah elemen dengan pointer-events: none;ditentukan
inheritakan menggunakan pointer-eventsnilai induk dari elemen tersebut

Lihat Pena ini!

Seperti yang ditunjukkan di atas, kasus penggunaan utama untuk pointer-eventsadalah mengizinkan perilaku klik atau ketuk untuk "melewati" elemen ke elemen lain di bawahnya pada sumbu Z. Misalnya, ini akan berguna untuk hamparan grafik, atau menyembunyikan elemen dengan opacity(mis. Tooltips) dan tetap mengizinkan pemilihan teks pada konten di bawahnya.

Tempat Menarik

“Penggunaan pointer-event di CSS untuk elemen non-SVG bersifat eksperimental. Fitur ini dulunya adalah bagian dari spesifikasi draf UI CSS3, tetapi karena banyak masalah terbuka, telah ditunda ke CSS4. ” - Mozilla MDN
"Jika Anda menambahkan pemroses peristiwa klik ke sebuah elemen, lalu menghapus gaya peristiwa-penunjuk (atau mengubah nilainya menjadi otomatis, peristiwa klik akan mengaktifkan fungsionalitas yang ditentukan. Pada dasarnya, peristiwa klik menghormati nilai peristiwa penunjuk." - David Walsh

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.