Pada kesempatan kali ini saya akan menjelaskan fungsi pointer-events di css. Dimana pointer-events adalah peristiwa pointer properti CSS yang memungkinkan teman-teman untuk mengendalikan elemen HTML dalam keadaan seperti apa elemen grafis tertentu dapat menjadi sasaran acara mouse.

Ketika pointer-event digunakan pada sebuah elemen HTML, maka dapat menentukan apakah suatu elemen tersebut dapat merespons atau tidak pada peristiwa mouse, dan digunakan untuk mencegah klik, status (CSS active, focus, dan hover states), serta tindakan kursor (yang menunjukkan kursor kursor di atas tautan).

Berikut terdapat beberapa nilai dari property pointer-events tersebut, di bawah ini:

Bila properti ini tidak ditentukan, karakteristik yang sama dari nilai yang visiblePainted berlaku untuk konten SVG. Selain menunjukkan bahwa elemen tersebut bukan target peristiwa mouse, maka nilainya tidak ada yang menginstruksikan acara mouse untuk pergi “melalui” elemen dan targetkan elemen “di bawah” itu.

Sintax

Properti pointer-event ditentukan sebagai satu kata kunci yang dipilih dari daftar nilai di bawah ini

Values

Auto

Elemen berperilaku seperti jika properti pointer-event tidak ditentukan. Pada konten SVG, nilai ini dan nilai yang visiblePainted memiliki efek yang sama.

none

Unsur itu tidak pernah menjadi sasaran acara mouse; Namun, peristiwa mouse dapat menargetkan elemen keturunannya jika keturunan tersebut memiliki peristiwa penunjuk yang ditetapkan pada nilai lain. Dalam keadaan seperti ini, acara mouse akan memicu pendengar acara pada elemen induk ini sebagaimana mestinya dalam perjalanan ke / dari keturunan selama fase pengambilan.

visiblePainted

SVG Elemen hanya bisa menjadi sasaran acara mouse saat properti visible disetel terlihat dan bila kursor mouse berada di atas interior (yaitu, ‘isi’) elemen dan properti isi diatur ke nilai selain tidak ada , Atau bila kursor mouse berada di atas perimeter (yaitu, ‘stroke’) elemen dan properti stroke diatur ke nilai selain yang tidak ada.

VisibleFill

Hanya SVG Elemen hanya bisa menjadi sasaran acara mouse saat properti visibilitas disetel terlihat dan bila kursor mouse berada di atas bagian interior (yaitu, isi) elemen. Nilai properti isi tidak mempengaruhi pemrosesan acara.

visibleStroke   

Hanya SVG Elemen hanya bisa menjadi sasaran acara mouse saat properti visibilitas diatur agar terlihat dan bila kursor mouse berada di atas perimeter (yaitu, goresan) elemen. Nilai dari properti stroke tidak mempengaruhi pemrosesan event.

visible

Hanya SVG Elemen dapat menjadi sasaran peristiwa mouse saat properti visibilitas disetel ke terlihat dan kursor mouse berada di atas bagian dalam (yaitu, isi) atau perimeter (yaitu, goresan) elemen. Nilai pengisian dan goresan tidak mempengaruhi pemrosesan acara.

painted

Hanya SVG Elemen hanya bisa menjadi sasaran acara mouse saat kursor mouse berada di atas bagian dalam (yaitu, ‘isi’) elemen dan properti isi diatur ke nilai selain tidak ada, atau bila kursor mouse berada di atas Perimeter (yaitu, ‘stroke’) elemen dan sifat stroke diatur ke nilai selain tidak ada. Nilai properti visibilitas tidak mempengaruhi pemrosesan acara.

fill

Hanya SVG Elemen hanya bisa menjadi sasaran acara mouse saat pointer berada di atas interior (yaitu, isi) elemen. Nilai sifat isi dan visibilitas tidak mempengaruhi pemrosesan acara.

stroke

Hanya SVG Elemen hanya bisa menjadi sasaran acara mouse saat penunjuk berada di atas perimeter (yaitu, goresan) elemen. Nilai sifat stroke dan visibilitas tidak mempengaruhi pemrosesan event.

all

Hanya SVG Elemen hanya bisa menjadi sasaran acara mouse saat penunjuk berada di atas interior (yaitu, isi) atau perimeter (yaitu, goresan) elemen. Nilai sifat pengisian, goresan dan visibilitas tidak mempengaruhi pemrosesan acara.

Contoh penerapan nya

Pada contoh di sini, saya ambil dengan studi kasus pada tag link <a> , dimana salah satu dari link tersebut saya ingin set pointer-events nya menjadi tidak ada atau none, dan teman-teman bisa ketikan kode seperti di bawah ini:

  1. Buatlah file HTML dengan nama index.html, dan ketikan kode seperti di bawah ini:

2. Buatlah file dengan nama style.css, dan ketikan kode seperti di bawah ini:

Sampai di sini penjelasan saya mengenai fungsi pointer-events di css. pointer-events, semoga bermanfaat.