คุณสมบัติ pointer-events ระบุว่าองค์ประกอบควรดำเนินการบางอย่างหรือไม่เมื่อเหตุการณ์ตัวชี้ถูกทริกเกอร์ เหตุการณ์ของตัวชี้สามารถทริกเกอร์ได้ด้วยการคลิกเมาส์ สัมผัส สไตลัส ฯลฯ
ต่อไปนี้เป็นรหัสที่แสดงคุณสมบัติตัวชี้เหตุการณ์ใน 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> ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อวางเมาส์เหนือลิงก์ที่สอง คุณจะเห็นตัวชี้เมาส์ เนื่องจากเราได้ตั้งค่าคุณสมบัติ pointerevents..
