Pada artikel ini, kita akan mempelajari cara menonaktifkan event klik menggunakan CSS.

Jadi ayo mulai!

Bagaimana Cara Menonaktifkan Acara Klik Menggunakan CSS?

Anda dapat menonaktifkan acara klik menggunakan CSS “ pointer-acara ' Properti. Tapi, melompat ke dalamnya, kami akan menjelaskannya secara singkat kepada Anda.

Apa itu Properti CSS 'pointer-events'?

' pointer-acara ” mengontrol bagaimana elemen HTML merespons atau berperilaku terhadap peristiwa sentuh, seperti peristiwa klik atau ketuk, status aktif atau arahkan kursor, dan apakah kursor terlihat atau tidak.

Sintaksis
Sintaks pointer-events adalah sebagai berikut:

Properti yang disebutkan di atas mengambil dua nilai, seperti “ mobil ' dan ' tidak ada ”:

• mobil: Ini digunakan untuk melakukan acara default.
• tidak ada: Ini digunakan untuk menonaktifkan acara.

Catatan: Contoh yang diberikan di bawah ini pertama-tama akan menunjukkan cara menambahkan dua tombol aktif, dan kemudian kami akan menonaktifkan acara klik tombol kedua.

Contoh 1: Menonaktifkan Acara Klik Tombol Menggunakan CSS
Dalam contoh ini, kita akan membuat heading

dan dua tombol. Selanjutnya tentukan “ tombol ” sebagai nama kelas dari tombol pertama, dan tetapkan “ tombol ' dan ' tombol2 ” sebagai kelas dari tombol kedua.

HTML

< div >
< h1 > Nonaktifkan Acara Klik Menggunakan CSS < / h1 >
< tombol kelas = 'tombol' > Aktifkan Tombol < / tombol >
< tombol kelas = 'tombol tombol2' > Nonaktifkan Tombol < / tombol >
< / div >

Di CSS, “ .tombol ” digunakan untuk mengakses kedua tombol yang dibuat dalam file HTML. Selanjutnya, atur gaya perbatasan sebagai “ tidak ada ” dan berikan padding sebagai “ 25px ”. Setelah itu, atur warna teks tombol sebagai “ rgb(29, 6, 31) ” dan latar belakang tombol sebagai “ rgb(19, 192, 163) ”. Kami juga akan mengatur radius tombol sebagai “ 5px ”.

CSS

.tombol {
berbatasan : tidak ada ;
lapisan : 25px ;
warna : rgb ( 29 , 6 , 31 ) ;
warna latar belakang : rgb ( 19 , 192 , 163 ) ;
radius batas : 5px ;
}

Setelah itu, kita akan menerapkan pseudo-class :active pada kedua tombol sebagai “ .tombol:aktif ” dan atur warna tombol sebagai “ rgb(200, 255, 0) ”:

.tombol : aktif {
warna latar belakang : rgb ( 209 , 65 , 65 ) ;
}

Hasilnya, Anda akan melihat hasil berikut:

Sekarang, kita akan pindah ke bagian selanjutnya di mana kita akan menonaktifkan event klik untuk tombol kedua.

Untuk melakukannya, gunakan “ .tombol2 ” untuk mengakses tombol kedua, dibuat dalam file HTML, dan setelah itu, atur nilai properti pointer-events sebagai “ tidak ada ”:

.tombol2 {
pointer-acara : tidak ada ;
}

Menggunakan properti pointer-events dan menyetel nilainya ke non akan menonaktifkan event klik, yang dapat dilihat pada output berikut:

Kami telah menyediakan metode termudah untuk menonaktifkan acara klik menggunakan CSS.

Kesimpulan

Untuk menonaktifkan acara klik dalam HTML, tombol “ pointer-acara ” properti dari CSS digunakan. Untuk tujuan ini, tambahkan elemen HTML dan atur nilai properti pointer-events sebagai “ tidak ada ” untuk menonaktifkan acara kliknya. Artikel ini menjelaskan cara menonaktifkan acara klik menggunakan CSS beserta contohnya.