Belajar CSS Bagian 31: Mengenal CSS Pointer-Events

Pernah melihat elemen website yang tidak bisa diklik meskipun terlihat aktif? Atau ingin membuat sebuah tombol tetap terlihat, tetapi tidak merespons interaksi pengguna? Dalam proses belajar CSS, Anda bisa mengatur perilaku tersebut menggunakan properti pointer-events.

Properti pointer-events memungkinkan Anda mengatur apakah suatu elemen HTML dapat merespons interaksi seperti klik, hover, atau sentuhan. Dengan memahami properti ini, Anda bisa membuat tampilan website lebih interaktif dan mengatur perilaku elemen sesuai kebutuhan.

Lantas, bagaimana cara kerja CSS pointer-events, apa saja nilai yang tersedia, dan bagaimana penerapannya pada kode HTML? Simak tutorial berikut untuk mempelajarinya!

Ringkasan

• Properti CSS untuk mengatur apakah elemen HTML dapat merespons interaksi pointer, seperti klik, hover, dan sentuhan.
• Mengatur interaksi elemen, menonaktifkan klik, membuat overlay tembus klik, serta mengontrol interaksi pada SVG.
• Beberapa nilai yang umum digunakan adalah auto, none, inherit, initial, dan unset.
• Properti pointer-events dapat diterapkan pada elemen HTML, seperti tautan, untuk mengatur apakah elemen tersebut dapat diklik.
• Properti ini tidak menonaktifkan akses keyboard dan bukan fitur keamanan. Karena itu, penggunaannya perlu memperhatikan aspek aksesibilitas.

Apa Itu CSS pointer-events?

pointer-events adalah property CSS yang mengatur apakah sebuah elemen dapat menjadi target dari interaksi pointer, seperti klik mouse, hover, sentuhan layar, atau stylus. Dengan kata lain, property ini menentukan apakah elemen “bisa disentuh” atau tidak.

Kalau elemen diberi pointer-events: none, browser akan menganggap elemen itu tidak ada saat pengguna mengklik atau mengarahkan kursor. Event-nya akan diteruskan ke elemen yang berada di bawahnya.

Fungsi pointer-events

Beberapa kegunaan yang paling sering ditemui:

• Menonaktifkan klik pada elemen, misalnya tombol atau tautan yang belum boleh diakses.
• Membuat overlay “tembus klik”, sehingga elemen di bawah lapisan dekoratif tetap bisa diklik.
• Menghilangkan efek hover pada elemen tertentu.
• Mengontrol interaksi pada SVG, misalnya hanya area isi atau garis tepi yang merespons klik.

Sintaks Dasar:

selector {
  pointer-events: nilai;
}

Jenis Nilai pointer-events

Berikut adalah nilai umum yang sering digunakan pada kode HTML.

• auto : Merupakan nilai bawaan, Elemen merespons interaksi pointer seperti biasa.
• none : Elemen tidak merespons pointer, Event diteruskan ke elemen di bawahnya.
• inherit : Mengikuti nilai dari elemen induk.
• initial : Mengembalikan ke nilai awal (auto).
• unset : Bersifat inherit jika property diwariskan, selain itu initial.

Contoh Implementasi pada kode HTML

Berikut adalah salah satu contoh impelementasi kedalam kode HTML.

<!DOCTYPE html>
<html>
<head>
<style> 
.link1 {
  pointer-events: auto;
}

.link2 {
  cursor: not-allowed;
  pointer-events: none;
}
</style>
</head>
<body>

<b>Menggunakan pointer-events Property</b>

<p>Arahkan cursor ke link berikut untuk melihat hasilnya</p>

<b>Link dapat di klik menggunakan pointer-events: auto (default):</b>
<p>Klik link berikut : <a class="link1" href="https://www.rumahweb.com/journal/tag/belajar-css/">Panduan CSS</a></p>

<b>Link tidak bisa diklik menggunakan pointer-events: none: </b>
<p>Klik link berikut : <a class="link2" href="https://www.rumahweb.com/journal/tag/belajar-css/">Panduan CSS</a></p>

</body>
</html>

Jika di testing, maka link tidak bisa di klik, berikut contohnya :

Arahkan cursor ke link berikut untuk melihat hasilnya

Klik link berikut : Panduan CSS

Klik link berikut : Panduan CSS

Hal yang Perlu Diperhatikan

• Tidak menonaktifkan akses keyboard
  Elemen dengan pointer-events: none tetap bisa difokuskan lewat tombol Tab dan diaktifkan dengan Enter. Untuk tombol atau input, gunakan atribut disabled. Untuk tautan, tambahkan tabindex=”-1″ dan aria-disabled=”true“.
• Bukan fitur keamanan
  Pengguna masih bisa melewatinya lewat DevTools, jadi validasi tetap harus dilakukan di sisi server.
• Memengaruhi hover
  Efek :hover pada elemen tersebut tidak akan aktif.
• Dukungan Browser
  pointer-events didukung oleh semua browser modern, yaitu Chrome, Firefox, Safari, dan Edge, sehingga aman dipakai di proyek produksi.

FAQ

Beberapa pertanyaan popular tentang properti CSS pointer-events.

Kesimpulan

Properti CSS pointer-events dapat digunakan untuk mengatur bagaimana sebuah elemen merespons interaksi pengguna, seperti klik, hover, dan sentuhan. Dengan memahami nilai seperti none dan auto, Anda bisa mengatur perilaku elemen sesuai kebutuhan. Namun, tetap perhatikan aspek aksesibilitas agar website nyaman digunakan oleh semua pengunjung, termasuk pengguna keyboard dan pembaca layar.

Itulah pembahasan belajar CSS bagian 31 tentang pointer-events. Jangan lewatkan seri Belajar CSS Rumahweb berikutnya untuk mempelajari properti CSS lainnya dan meningkatkan keterampilan Anda dalam mengembangkan website!