CSS - Pointer Events: A Beginner's Guide

Halo di sini, para pengembang web yang sedang mencari tahu! Hari ini, kita akan masuk ke dunia yang menarik dari CSS pointer events. Jangan khawatir jika Anda baru saja mulai – saya akan menggulirkan Anda langkah demi langkah, sama seperti yang saya lakukan untuk ribuan murid selama tahun-tahun mengajar saya. Jadi, ambil secangkir kopi (atau minuman kesukaan Anda), dan mari kita mulai!

apa itu Pointer Events?

Sebelum kita masuk ke detailnya, mari bicarakan apa sebenarnya pointer events itu. Bayangkan Anda di museum, dan ada tanda "Jangan Sentuh" di sebelah lukisan yang indah. Tanda itu seperti pointer event dalam CSS – itu mengontrol bagaimana Anda berinteraksi dengan elemen di halaman web.

Dalam CSS, properti pointer-events memungkinkan kita mengontrol bagaimana elemen HTML merespon kejadian mouse/touch. Itu seperti memberikan superpower ke elemen halaman web Anda!

Sintaks Pointer Events

Mari kita mulai dengan sintaks dasar:

selector {
pointer-events: value;
}

Simple, kan? Sekarang, mari kita lihat nilai yang mungkin Anda gunakan.

Nilai yang Mungkin untuk Pointer Events

Berikut adalah tabel dari semua nilai yang mungkin untuk properti pointer-events:

Nilai	Deskripsi
auto	Elemen berperilaku seperti yang biasa jika properti itu tidak ditentukan
none	Elemen tidak pernah menjadi target kejadian pointer
visiblePainted	Hanya SVG. Elemen hanya bisa menjadi target kejadian pointer saat properti visibility diatur ke visible dan saat kursor mouse di atas area "dipaint"
visibleFill	Hanya SVG. Elemen bisa menjadi target kejadian pointer saat properti visibility diatur ke visible dan saat kursor mouse di atas interior elemen
visibleStroke	Hanya SVG. Elemen bisa menjadi target kejadian pointer saat properti visibility diatur ke visible dan saat kursor mouse di atas perimeter elemen
visible	Hanya SVG. Elemen bisa menjadi target kejadian pointer saat properti visibility diatur ke visible
painted	Hanya SVG. Elemen hanya bisa menjadi target kejadian pointer saat kursor mouse di atas area "dipaint"
fill	Hanya SVG. Elemen hanya bisa menjadi target kejadian pointer saat kursor mouse di atas interior elemen
stroke	Hanya SVG. Elemen hanya bisa menjadi target kejadian pointer saat kursor mouse di atas perimeter elemen
all	Hanya SVG. Elemen bisa menjadi target kejadian pointer saat kursor mouse di atas baik interior atau perimeter elemen

Jangan khawatir jika beberapa di antaranya terlihat membingungkan – kita akan fokus pada yang paling umum digunakan dalam elemen HTML biasa.

Menggunakan Pointer Events

Properti pointer-events bisa diterapkan ke sebagian besar elemen HTML. Itu sangat berguna untuk mengontrol interaksi dengan gambar, tautan, dan elemen yang dapat diklik lainnya.

CSS pointer-events: none Nilai

Mari kita mulai dengan kasus umum. Bayangkan Anda memiliki tombol yang ingin Anda nonaktifkan secara singkat:

<button id="myButton">Klik saya!</button>

#myButton {
pointer-events: none;
opacity: 0.5;
}

Dalam contoh ini, kita telah mengatur pointer-events: none pada tombol. Ini berarti tombol itu tidak akan merespon kejadian mouse apa pun – itu seperti memberikan perisai tak terlihat di atasnya. Kita juga mengurangi opacity untuk memberikan petunjuk visual bahwa itu dinonaktifkan.

CSS pointer-events: auto Nilai

Sekarang, mari kita katakan kita ingin mengaktifkan tombol lagi:

#myButton {
pointer-events: auto;
opacity: 1;
}

Dengan mengatur pointer-events: auto, kita memberitahu browser untuk menangani kejadian pointer pada elemen ini seperti biasa. Itu seperti menghapus perisai tak terlihat.

Menonaktifkan Pointer Events pada Gambar

Ini adalah trik kecil yang saya suka tunjukkan ke murid-murid saya. Kadang-kadang, Anda mungkin ingin membuat gambar "dapat diklik melalui" – artinya Anda dapat mengklik elemen di belakangnya. Berikut adalah cara Anda bisa melakukannya:

<div class="container">
<img src="cute-cat.jpg" alt="Anak kucing yang lucu" class="overlay-image">
<button>Klik saya!</button>
</div>

.container {
position: relative;
}

.overlay-image {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}

Dalam contoh ini, kita memiliki gambar yang menutup tombol. Dengan mengatur pointer-events: none pada gambar, kita memungkinkan klik untuk "melewati" gambar ke tombol di bawahnya.

Hal untuk Dipikirkan

1. Properti pointer-events tidak hanya mempengaruhi kejadian mouse – itu juga mempengaruhi kejadian touch pada perangkat移动.
2. Menggunakan pointer-events: none tidak membuat elemen tak terlihat – itu hanya membuatnya non-interactive.
3. Berhati-hati saat menggunakan pointer-events: none pada elemen navigasi penting, karena itu dapat mempengaruhi aksesibilitas.

Kesimpulan

Dan itu dia, teman-teman! Kita telah melakukan perjalanan melalui negeri CSS pointer events. Ingat, seperti alat yang kuat, gunakanlah dengan bijak. Selama tahun-tahun mengajar saya, saya telah melihat murid-murid menciptakan pengalaman interaktif yang benar-benar menakjubkan menggunakan properti ini.

Latih dengan contoh-contoh ini, eksperimen, dan jangan takut untuk membuat kesalahan – itu adalah bagaimana kita belajar! Sebelum Anda tahu, Anda akan mengontrol kejadian pointer seperti seorang ahli, menciptakan halaman web dinamis dan interaktif yang akan mempesona pengguna Anda.

Terus coding, terus belajar, dan terutama, bersenang-senang! Sampaijumpa lagi, semangat styling!

Credits: Image by storyset