ปิด/เปิด Mouse Events บนอีเลเมนต์ด้วย pointer-events ใน JavaScript

CSS property pointer-events ควบคุมว่าอีเลเมนต์จะตอบสนองต่อเหตุการณ์เมาส์ (click, hover, drag ฯลฯ) ได้หรือไม่ ค่า none = ปิดการตอบสนอง (คลิกทะลุไปยังอีเลเมนต์ด้านหลัง) ค่า auto = เปิด (ค่าเริ่มต้น) สามารถเปลี่ยนผ่าน JavaScript ได้ด้วย element.style.pointerEvents

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ปิด/เปิด Mouse Events</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: rebeccapurple; cursor: pointer; }
    .size { font-size: 30px; }
  </style>
</head>
<body>
  <h1>ปิด/เปิด Mouse Events ด้วย JavaScript</h1>
  <div class="result">ข้อความนี้คลิกได้ — ลองคลิกดู</div>
  <button class="Btn">ปิด Events (DISABLE)</button>
  <button class="Btn">เปิด Events (ENABLE)</button>
  <h3>กดปุ่มเพื่อปิด/เปิดการตอบสนองของเมาส์</h3>
  <script>
    const resEle = document.querySelector(".result");
    const btnEle = document.querySelectorAll(".Btn");
    // คลิกข้อความ = ทoggle ขนาดตัวอักษร
    resEle.addEventListener("click", () => {
      resEle.classList.toggle("size");
    });
    // ปิด mouse events
    btnEle[0].addEventListener("click", () => {
      resEle.style.pointerEvents = "none";
      resEle.textContent = "Mouse events ปิดแล้ว — คลิกไม่ได้ (ข้อความเล็กคืน)";
    });
    // เปิด mouse events
    btnEle[1].addEventListener("click", () => {
      resEle.style.pointerEvents = "auto";
      resEle.textContent = "Mouse events เปิดแล้ว — คลิกได้อีกครั้ง";
    });
  </script>
</body>
</html>

ผลลัพธ์

คลิกข้อความ (ขนาดใหญ่):

กด "ปิด Events" แล้วคลิกข้อความ:

กด "เปิด Events" แล้วคลิก:

คำอธิบายเพิ่มเติม

• pointer-events: none ทำให้อีเลเมนต์ "โปร่งใส" ต่อเมาส์ — เหตุการณ์จะผ่านไปยังอีเลเมนต์ด้านหลัง (z-index ต่ำกว่า)
• ใช้ได้กับ: click, hover, drag, touch (บนมือถือ)
• ไม่ส่งผลต่อ: การโฟกัสด้วยแป้นพิมพ์ (Tab), screen readers
• กรณีใช้งาน: Overlay loading, modal backdrop, ปิดปุ่มชั่วคราว, ป้องกัน double-click

วิธีอื่น: ตรวจสอบใน Event Handler

// แทน CSS ใช้ flag ใน JS
let disabled = false;
element.addEventListener('click', (e) => {
  if (disabled) return; // ยกเลิกการทำงาน
  // logic...
});

วิธีนี้ยืดหยุ่นกว่า (เช็คเงื่อนไขซับซ้อนได้) แต่ CSS pointer-events เรียบง่ายและประสิทธิภาพดีกว่าสำหรับการปิด/เปิดแบบง่าย