ในบทความนี้ เราจะเรียนรู้วิธีปิดการใช้งานเหตุการณ์คลิกโดยใช้ CSS

เริ่มกันเลย!

วิธีปิดการใช้งานเหตุการณ์คลิกโดยใช้ CSS

คุณสามารถปิดการใช้งานเหตุการณ์คลิกโดยใช้ CSS “ ตัวชี้เหตุการณ์ ' คุณสมบัติ. แต่เราจะอธิบายคร่าวๆ ให้คุณฟังโดยย่อ

คุณสมบัติ CSS 'ตัวชี้เหตุการณ์' คืออะไร

“ ตัวชี้เหตุการณ์ ” ควบคุมวิธีที่องค์ประกอบ HTML ตอบสนองหรือทำงานต่อเหตุการณ์การสัมผัส เช่น เหตุการณ์คลิกหรือแตะ สถานะใช้งานหรือวางเมาส์เหนือ และดูว่าเคอร์เซอร์สามารถมองเห็นได้หรือไม่

ไวยากรณ์
ไวยากรณ์ของ pointer-events มีดังนี้:

คุณสมบัติการกล่าวถึงข้างต้นใช้ค่าสองค่า เช่น “ รถยนต์ ' และ ' ไม่มี ”:

• อัตโนมัติ: มันถูกใช้เพื่อดำเนินการเหตุการณ์เริ่มต้น
• ไม่มี: มันถูกใช้เพื่อปิดการใช้งานเหตุการณ์

หมายเหตุ: ตัวอย่างด้านล่างจะแสดงวิธีเพิ่มปุ่มที่ใช้งานอยู่สองปุ่มก่อน จากนั้นเราจะปิดใช้งานเหตุการณ์การคลิกของปุ่มที่สอง

ตัวอย่างที่ 1: ปิดการใช้งานเหตุการณ์คลิกของปุ่มโดยใช้ CSS
ในตัวอย่างนี้ เราจะสร้างหัวข้อ

และปุ่มสองปุ่ม ต่อไปให้ระบุ “ ปุ่ม ” เป็นชื่อคลาสของปุ่มแรก และกำหนด “ ปุ่ม ' และ ' ปุ่ม2 ” เป็นคลาสของปุ่มที่สอง

HTML

< div >
< ชั่วโมง1 > ปิดการใช้งานคลิกเหตุการณ์โดยใช้ CSS < / ชั่วโมง1 >
< ปุ่ม ระดับ = 'ปุ่ม' > เปิดใช้งานปุ่ม < / ปุ่ม >
< ปุ่ม ระดับ = 'ปุ่ม button2' > ปิดการใช้งานปุ่ม < / ปุ่ม >
< / div >

ใน CSS “ .ปุ่ม ” ใช้เพื่อเข้าถึงทั้งสองปุ่มที่สร้างในไฟล์ HTML ถัดไป กำหนดลักษณะเส้นขอบเป็น “ ไม่มี ” และให้ padding เป็น “ 25px ” หลังจากนั้นให้ตั้งค่าสีของข้อความปุ่มเป็น “ rgb(29, 6, 31) ” และพื้นหลังของปุ่มเป็น “ rgb(19, 192, 163) ” เราจะกำหนดรัศมีของปุ่มเป็น “ 5px ”

CSS

.ปุ่ม {
ชายแดน : ไม่มี ;
การขยายความ : 25px ;
สี : rgb ( 29 , 6 , 31 ) ;
สีพื้นหลัง : rgb ( 19 , 192 , 163 ) ;
รัศมีชายแดน : 5px ;
}

หลังจากนั้น เราจะใช้ :active pseudo-class กับทั้งสองปุ่มเป็น “ .button:ใช้งานอยู่ ” และกำหนดสีของปุ่มเป็น “ rgb(200, 255, 0) ”:

.ปุ่ม : คล่องแคล่ว {
สีพื้นหลัง : rgb ( 209 , 65 , 65 ) ;
}

เป็นผลให้คุณจะเห็นผลลัพธ์ต่อไปนี้:

ตอนนี้ เราจะย้ายไปยังส่วนถัดไปที่เราจะปิดการใช้งานเหตุการณ์การคลิกสำหรับปุ่มที่สอง

ในการทำเช่นนั้น ใช้ “ .button2 ” เพื่อเข้าถึงปุ่มที่สองที่สร้างขึ้นในไฟล์ HTML และหลังจากนั้นตั้งค่าคุณสมบัติตัวชี้เหตุการณ์เป็น “ ไม่มี ”:

.button2 {
ตัวชี้เหตุการณ์ : ไม่มี ;
}

การใช้คุณสมบัติ pointer-events และการตั้งค่าเป็น non จะเป็นการปิดใช้เหตุการณ์ click ซึ่งสามารถเห็นได้ในผลลัพธ์ต่อไปนี้:

เราได้จัดเตรียมวิธีที่ง่ายที่สุดในการปิดใช้งานเหตุการณ์การคลิกโดยใช้ CSS

บทสรุป

ในการปิดใช้งานเหตุการณ์การคลิกใน HTML ' ตัวชี้เหตุการณ์ ” ใช้คุณสมบัติของ CSS เพื่อจุดประสงค์นี้ ให้เพิ่มองค์ประกอบ HTML และตั้งค่าคุณสมบัติ pointer-events เป็น “ ไม่มี ” เพื่อปิดการใช้งานเหตุการณ์การคลิก บทความนี้อธิบายวิธีปิดใช้งานเหตุการณ์การคลิกโดยใช้ CSS พร้อมกับตัวอย่าง