คุณสมบัติ pointer-events ระบุว่าองค์ประกอบควรตอบสนองต่อเหตุการณ์ตัวชี้ (Pointer Events) หรือไม่เมื่อถูกทริกเกอร์ Pointer events สามารถทริกเกอร์ได้จากการคลิกเมาส์ แตะ สติลัส ฯลฯ
นี่คือโค้ดตัวอย่าง pointer-events property ใน CSS −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .pointer1 { font-size: 20px; padding: 10px; pointer-events: none; } .pointer2 { font-size: 20px; padding: 10px; pointer-events: auto; } </style> </head> <body> <h1>Pointer-events property example</h1> <div class="pointer1"> Go to <a href="https://www.wikipedia.org">wikipedia.org</a> </div> <div class="pointer2"> Go to <a href="https://www.google.com/">google.com</a> </div> <h2>Hover over the above links to see pointer events</h2> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
เมื่อวางเมาส์เหนือลิงก์ที่สอง จะเห็นตัวชี้เมาส์ เนื่องจากเราตั้งค่า pointer-events property..
