Dalam artikel ini, kita akan belajar cara melumpuhkan acara klik menggunakan CSS.

Jadi, mari kita mulakan!

Bagaimana untuk Melumpuhkan Acara Klik Menggunakan CSS?

Anda boleh melumpuhkan acara klik menggunakan CSS “ penunjuk-peristiwa ” harta benda. Tetapi, melompat ke dalamnya, kami akan menerangkan secara ringkas kepada anda.

Apakah itu Harta CSS 'pointer-events'?

' penunjuk-peristiwa ” mengawal cara elemen HTML bertindak balas atau berkelakuan kepada acara sentuh, seperti acara klik atau ketik, keadaan aktif atau tuding dan sama ada kursor kelihatan atau tidak.

Sintaks
Sintaks acara penunjuk adalah seperti berikut:

Harta yang disebutkan di atas mengambil dua nilai, seperti ' auto ” dan “ tiada ”:

• auto: Ia digunakan untuk melaksanakan acara lalai.
• tiada: Ia digunakan untuk melumpuhkan acara.

Nota: Contoh yang diberikan di bawah pada mulanya akan menunjukkan cara menambah dua butang aktif, dan kemudian kami akan melumpuhkan acara klik butang kedua.

Contoh 1: Melumpuhkan Acara Klik Butang Menggunakan CSS
Dalam contoh ini, kami akan mencipta tajuk

dan dua butang. Seterusnya, nyatakan “ butang ' sebagai nama kelas butang pertama, dan tetapkan ' butang ” dan “ butang2 ” sebagai kelas butang kedua.

HTML

< div >
< h1 > Lumpuhkan Acara Klik Menggunakan CSS < / h1 >
< butang kelas = 'butang' > Butang Dayakan < / butang >
< butang kelas = 'butang butang2' > Lumpuhkan Butang < / butang >
< / div >

Dalam CSS, ' .butang ” digunakan untuk mengakses kedua-dua butang yang dicipta dalam fail HTML. Seterusnya, tetapkan gaya sempadan sebagai “ tiada ” dan berikan padding sebagai “ 25px ”. Selepas itu, tetapkan warna teks butang sebagai “ rgb(29, 6, 31) ” dan latar belakang butang sebagai “ rgb(19, 192, 163) ”. Kami juga akan menetapkan jejari butang sebagai ' 5px ”.

CSS

.butang {
sempadan : tiada ;
padding : 25px ;
warna : rgb ( 29 , 6 , 31 ) ;
warna latar belakang : rgb ( 19 , 192 , 163 ) ;
jejari sempadan : 5px ;
}

Selepas itu, kami akan menggunakan :active pseudo-class pada kedua-dua butang sebagai “ .button:aktif ” dan tetapkan warna butang sebagai “ rgb(200, 255, 0) ”:

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

Hasilnya, anda akan melihat hasil berikut:

Sekarang, kami akan beralih ke bahagian seterusnya di mana kami akan melumpuhkan acara klik untuk butang kedua.

Untuk berbuat demikian, gunakan ' .butang2 ” untuk mengakses butang kedua, yang dibuat dalam fail HTML, dan selepas itu, tetapkan nilai sifat pointer-events sebagai “ tiada ”:

.butang2 {
penunjuk-peristiwa : tiada ;
}

Menggunakan sifat pointer-events dan menetapkan nilainya kepada bukan akan melumpuhkan acara klik, yang boleh dilihat dalam output berikut:

Kami telah menyediakan kaedah paling mudah untuk melumpuhkan acara klik menggunakan CSS.

Kesimpulan

Untuk melumpuhkan acara klik dalam HTML, “ penunjuk-peristiwa ” sifat CSS digunakan. Untuk tujuan ini, tambahkan elemen HTML dan tetapkan nilai sifat pointer-events sebagai “ tiada ” untuk melumpuhkan acara kliknya. Artikel ini menerangkan cara untuk melumpuhkan acara klik menggunakan CSS bersama-sama dengan contohnya.