คุณสมบัติ cancelable ของ Event: ตรวจสอบเหตุการณ์ที่ยกเลิกได้

คุณสมบัติ event.cancelable คืออะไร?

คุณสมบัติ event.cancelable ใน HTML DOM ใช้สำหรับ ตรวจสอบว่าเหตุการณ์ (Event) นั้นสามารถยกเลิกได้หรือไม่ คืนค่า true หากยกเลิกได้ และ false หากยกเลิกไม่ได้

ไวยากรณ์ (Syntax)

event.cancelable

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

<!DOCTYPE html>
<html>
<body>
  <h2>ตรวจสอบเหตุการณ์ที่ยกเลิกได้</h2>
  <p>กดปุ่มด้านล่างเพื่อดูว่าเหตุการณ์ click สามารถยกเลิกได้หรือไม่</p>
  <button onclick="checkCancelable(event)">ตรวจสอบ</button>
  <p id="result"></p>
  
  <script>
    function checkCancelable(event) {
      var canCancel = event.cancelable;
      document.getElementById("result").innerHTML = 
        "เหตุการณ์นี้ยกเลิกได้: " + canCancel;
    }
  </script>
</body>
</html>

ผลลัพธ์

เมื่อกดปุ่ม จะแสดง true เพราะเหตุการณ์ click สามารถยกเลิกได้ด้วย event.preventDefault()

เหตุการณ์ที่ยกเลิกได้ (cancelable = true)

• click, mousedown, mouseup
• keydown, keypress, keyup
• submit (ฟอร์ม), wheel (เลื่อนเมาส์)

เหตุการณ์ที่ยกเลิกไม่ได้ (cancelable = false)

• scroll, focus, blur
• load, resize, error