คุณสมบัติ defaultPrevented ของ Event: ตรวจสอบว่า preventDefault() ถูกเรียกหรือไม่

ไวยากรณ์ (Syntax)

event.defaultPrevented

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <h2>ตัวอย่าง defaultPrevented</h2>
  <a id="mylink" href="https://example.com/">ลิงก์ตัวอย่าง (คลิกฉัน)</a>
  
  <script>
    document.getElementById("mylink").addEventListener("click", function(event) {
      event.preventDefault(); // ยกเลิกการนำทางลิงก์
      alert("preventDefault() ถูกเรียก: " + event.defaultPrevented); // true
    });
  </script>
</body>
</html>

ผลลัพธ์

เมื่อคลิกลิงก์ จะแสดง Alert: preventDefault() ถูกเรียก: true และ **ไม่ไปที่ example.com**

การทำงานของ preventDefault() และ defaultPrevented

element.addEventListener('click', function(event) {
  console.log('ก่อน preventDefault:', event.defaultPrevented); // false
  
  if (someCondition) {
    event.preventDefault(); // ยกเลิก Default Action
  }
  
  console.log('หลัง preventDefault:', event.defaultPrevented); // true หากเรียก
  
  // ใช้ตรวจสอบใน Event Listener อื่น (Capture/Bubble phase)
  // หรือใน Event Delegation
});

กรณีใช้งานจริง

• Form Validation: ยกเลิก Submit หากข้อมูลไม่ถูกต้อง
• Custom Context Menu: ยกเลิก Context Menu เริ่มต้น (contextmenu event)
• Drag & Drop: ยกเลิก Default Drag Behavior
• Keyboard Shortcuts: ยกเลิก Shortcut เริ่มต้นของเบราวเซอร์ (Ctrl+S, F5, ฯลฯ)
• Event Delegation: ตรวจสอบว่า Child Element ยกเลิกแล้วหรือยัง

เหตุการณ์ที่ preventDefault() ทำงานได้ (Cancelable)

• click (ลิงก์), submit (ฟอร์ม), keydown, wheel, dragstart, contextmenu, touchmove

เหตุการณ์ที่ preventDefault() ไม่ทำงาน (Non-cancelable)

• scroll, focus, blur, load, error
• ตรวจสอบได้จาก event.cancelable (ดูบทความก่อนหน้า)