Property CSS pointer-events digunakan untuk mengontrol dalam kondisi apa elemen grafis tertentu dapat menjadi target dari peristiwa pointer.

Perlu dicatat bahwa ini adalah properti SVG dan tidak didefinisikan dalam spesifikasi CSS apa pun.

Properti pointer-events dapat memiliki banyak nilai yang berlaku untuk elemen SVG, tetapi hanya tiga dari nilai ini yang berlaku untuk elemen HTML.

Ketika pointer-events digunakan pada elemen-elemen HTML, itu dapat menentukan apakah suatu elemen dapat merespon atau tidak (touch) mouse. Ini dapat digunakan untuk mencegah klik, status (CSS aktif, fokus, dan status hover), dan tindakan kursor (menunjukkan kursor kursor di atas tautan, misalnya).

Kalian dapat meminta elemen merespons event pointer (auto), atau mencegahnya melakukan hal itu (tidak ada). Jika Kalian mencegahnya merespons peristiwa penunjuk, elemen yang di bawahnya akan menjadi target dari peristiwa ini. Jika Kalian mengklik elemen tersebut, elemen di bawahnya akan menerima event klik itu. Hal yang sama berlaku untuk kursor dan tindakan kursor lainnya. Misalnya, Anda akan dapat memilih teks dalam elemen yang diposisikan di bawah elemen dengan peristiwa-pointer: tidak ada (lihat demo di bawah).

Properti pointer-events dapat sangat berguna dalam berbagai skenario. Salah satu keuntungan dari properti ini adalah memungkinkan kalian untuk membuat scrolling 60fps dengan menggunakan pointer-events: none

Menonaktifkan peristiwa pointer pada suatu elemen dapat ditimpa pada elemen turunan: Jika anak elemen memiliki peristiwa pointer: otomatis (yaitu diaktifkan), ia akan dapat menangani dan merespons peristiwa klik, meskipun induknya tidak .

Official Syntax:

 

Nilai-nilai dalam official syntax berlaku untuk elemen SVG. Dari nilai-nilai ini, hanya ini yang berlaku untuk HTML:

 

Penjelasan Values:

auto:

Nilai default. Pointer Event diaktifkan. Elemen merespons Pointer Event, mem-block peristiwa tersebut agar tidak dipecat pada elemen di bawahnya.

none:

Pointer Event dinonaktifkan pada elemen. Elemen tidak merespons Pointer Event. Elemen di bawahnya dapat merespons peristiwa pointer seolah-olah elemen itu tidak ada di atasnya.

inherit:

Elemen ini mewarisi nilai pointer-events dari induknya.

 

Contoh:

Contoh berikut menempatkan elemen overlay di seluruh halaman. Hamparan akan memudar menjadi tampilan melalui beberapa metode JavaScript yang akan dipecat jika pengguna melakukan beberapa tindakan pada halaman, misalnya. Untuk mencegah overlay memblokir acara pointer pada elemen di halaman lainnya, kami akan menonaktifkan event pointer di atasnya, sehingga acara dapat ditembakkan pada halaman di bawahnya seperti biasanya.

Kemudian, menggunakan JavaScript, elemen tersebut dapat memudar menjadi tampilan, dan peristiwa pointer dapat diaktifkan di atasnya sehingga pengguna dapat berinteraksi dengannya sesuai kebutuhan.