Log in with LINE
property-events เป็น property ของ CSS ควบคุมการตอบสนองขององค์ประกอบ HTML สำหรับเหตุการณ์ที่ใช้เมาส์ หรือการสัมผัสใด ๆ เมื่อการการตั้งค่าคุณลักษณะให้ปิดใช้งาน จะไม่มีการตอบสนองใดๆเมื่อใช้เมาส์ หรือการสัมผัสที่องค์ประกอบหรืออลิเมนต์นั้น
รูปแบบ Syntax ดังนี้
โค้ด: เลือกทั้งหมด
property-events: auto | noneสามารถเลือกกำหนดค่าเป็น auto หรือ none ได้
รองรับเบราว์เซอร์ขั้นต่ำ : Google Chrome 2.0, Internet Edge 11.0, Mozilla 3.6, Safari 4.0, Opera 9.6 ขึ้นไป
ตัวโค้ดด้านล่างนี้
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<title>Disable Link using CSS</title>
<style type="text/css">
.not-active {
pointer-events: none;
cursor: default;
}
</style>
</head>
<body>
<a href="www.midphp.com" class="not-active">Click Here</a>
</body>
</html>
ผลลัพธ์ที่ได้
- 2019-04-25_18-02-43.jpg (3.56 KiB) เปิดดู 495 ครั้ง
ซึ่งผลลัพธ์แสดงให้เห็นการใช้งานของคุณสมบัติดังกล่าว คือเหตุการณ์ที่แท็ก 'a' ซึ่งเป็นแท็กลิงค์ ถูกปิดใช้งานโดยไม่มีเคอร์เซอร์หรือจะไม่ปรากฎรูปมือ (ตัวชี้เคอร์เซอร์ที่ถูกปิดใช้งานบนแท็ก 'a') โดยปกติแล้วเมื่อ จุดนั้นเป็นลิงค์ เมาส์จะแสดงเป็นรูปมือชขี้เพื่อบงบอกถึงสามารถคลิกได้ แต่ในผลลัพธ์ยังคงรักษาลักษณะของเป็นลิงค์อยู่ หมายถึงมีสีนำเงินและขีดเส้นใต้
ถ้ากำหนด css style ตามนี้
โค้ด: เลือกทั้งหมด
<style type="text/css">
.not-active {
pointer-events: none;
cursor: default;
text-decoration: none;
color: black;
}
</style>ผลลัพธ์
- 2019-04-25_18-11-46.jpg (2.76 KiB) เปิดดู 495 ครั้ง
ผลลัพธ์จะเป็นเพียงการแสดงเหมือน text เฉยๆที่ไม่สามารถคลิกได้ แม้กระทั้งสีที่บงบอกว่าเป็นลิงค์ก็จะหายไปด้วยครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP
