Penunjuk-peristiwa - Trik CSS

Properti pointer-eventsini memungkinkan untuk mengawal bagaimana elemen HTML bertindak balas terhadap peristiwa tetikus / sentuhan - termasuk CSS hover / keadaan aktif, peristiwa klik / ketik dalam Javascript, dan sama ada kursor dapat dilihat atau tidak.

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

Walaupun pointer-eventsharta itu mengambil sebelas nilai yang mungkin, semua kecuali tiga daripadanya dikhaskan untuk digunakan dengan SVG. Tiga nilai yang sah untuk sebarang elemen HTMl adalah:

none menghalang semua pilihan klik, keadaan dan kursor pada elemen HTML yang ditentukan
automengembalikan fungsi lalai (berguna untuk digunakan pada elemen anak dari elemen dengan yang pointer-events: none;ditentukan
inheritakan menggunakan pointer-eventsnilai induk elemen

Lihat Pen ini!

Seperti yang ditunjukkan di atas, kes penggunaan utama pointer-eventsadalah membiarkan tingkah laku klik atau ketuk untuk "melewati" elemen ke elemen lain di bawahnya pada paksi Z. Contohnya, ini berguna untuk overlay grafik, atau menyembunyikan elemen dengan opacity(mis. Petua alat) dan masih membenarkan pemilihan teks pada kandungan di bawahnya.

Tempat Menarik

"Penggunaan peristiwa penunjuk dalam CSS untuk elemen bukan SVG adalah eksperimental. Ciri ini merupakan bagian dari spesifikasi draf CSS3 UI tetapi, karena banyak masalah terbuka, telah ditunda ke CSS4. " - Mozilla MDN
"Sekiranya anda menambahkan pendengar peristiwa klik ke elemen, kemudian hapus gaya peristiwa penunjuk (atau ubah nilainya menjadi automatik, peristiwa klik akan mengaktifkan fungsi yang ditentukan. Pada dasarnya, peristiwa klik menghormati nilai peristiwa penunjuk." - David Walsh

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.