การใช้คุณสมบัติตัวชี้เหตุการณ์ CSS เราสามารถควบคุมว่าจะอนุญาตให้ใช้เมาส์และการสัมผัสบนองค์ประกอบหรือไม่
ไวยากรณ์ของคุณสมบัติ CSS pointer-events มีดังนี้ -
pointer-events: auto|none;
ข้างบน
อัตโนมัติ เป็นค่าเริ่มต้น องค์ประกอบตอบสนองต่อเหตุการณ์ตัวชี้ในขณะที่
ไม่มี: องค์ประกอบไม่ตอบสนองต่อเหตุการณ์ตัวชี้
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS pointer-events
<!DOCTYPE html>
<html>
<head>
<style>
a {
margin: 10vh;
pointer-events: none;
}
a:last-of-type {
pointer-events: auto;
}
</style>
</head>
<body>
<a href=#>No pointer event here</a>
<a href=#>Automatic pointer event here</a>
</body>
</html> ผลลัพธ์
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
select {
margin: 10vh;
pointer-events: none;
background-color: mistyrose;
}
</style>
</head>
<body>
<select>
<option>No event here </option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</body>
</html> ผลลัพธ์
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
