CSS pointer-events กำหนดให้ div คลิกไม่ได้
สำหรับคนที่พัฒนา Web Application และ HTML5 Game ที่ต้องมีการคลิกปุ่มต่าง ๆ ภายในเว็บไซต์อยู่หลายจุด
div หรือ html element ต่าง ๆ เต็มหน้าเว็บเพจไปหมด อาจจะเคยเจอปัญหาเรื่องของการกำหนดพื้นที่การคลิก
เพราะบางทีอาจจะมี div บางตัวมาทับ div ที่เราอยากให้คลิกได้ทำให้พื้นที่การคลิกและการทำงานของโปรแกรมผิดพลาด
เราสามารถใช้คำสั่ง pointer-events เพื่อ disable div ที่ไม่ต้องการให้รับ events จาก mouse ได้
CSS หรือที่ย่อมาจากคำว่า Cascading Style Sheets มีคำสั่งอยู่คำสั่งหนึ่งที่บังคับไม่ให้เกิด events ใด ๆ
เมื่อมีการคลิกที่ div นั้น ๆ คือคำสั่ง pointer-events:none อาจจะมีอยู่หลายเหตุผลที่เราต้องการไม่ให้
div นั้นคลิกได้หรืออาจจะมี div บางตัวที่บดบัง div ที่เราต้องการให้คลิกได้ เราสามารถใช้คำสั่ง pointer-events
เพื่อกำหนดให้ div นั้น ๆ ไม่ทำงานเมื่อมีเหตุการณ์ click
ตัวอย่างการใช้งาน
.avoid-clicks {
pointer-events: none;
}
property values ของ pointer-events
- none ป้องกันไม่ให้เกิดการคลิกใด ๆ และไม่แสดง mouse cursor
- auto เริ่มต้นการทำงานใหม่ของคำสั่ง pointer-events คือเปลี่ยนเป็นคลิกได้นั่นเอง
- inherit กำหนดรูปแบบตาม element ที่ครอบตัวเองอยู่ จะคลิกได้หรือไม่ได้ขึ้นอยู่กับ element ที่ครอบตัวเองอยู่
ถ้าเราพัฒนา Web Application ซึ่งมีปุ่มหรือลิ้งอยู่มาก และต้อง interactive กับ user หลาย ๆ จุด
คำสั่ง pointer-events เป็นคำสั่ง css ที่ใช้งานค่อนข้างบ่อย
