คุณสมบัติเหตุการณ์ที่ยกเลิกได้ HTML DOM เชื่อมโยงกับเหตุการณ์ HTML เนื่องจาก JavaScript สามารถตอบสนองต่อเหตุการณ์เหล่านี้ คุณสมบัติเหตุการณ์ที่ยกเลิกได้จะคืนค่าบูลีนเป็น true หรือ false โดยระบุว่าสามารถยกเลิกกิจกรรมได้หรือไม่
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติเหตุการณ์ที่ยกเลิกได้ -
event.cancelable
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติเหตุการณ์ที่ยกเลิกได้ -
<!DOCTYPE html>
<html>
<body>
<p>Hover over the button below to find out if onmouseover is cancellable event or not</p>
<button onmouseover="cancelFunction(event)">CLICK IT</button>
<p id="Sample"></p>
<script>
function cancelFunction(event) {
var x = event.cancelable;
if(x==true)
document.getElementById("Sample").innerHTML = "The onmouseover event is cancellable";
else
document.getElementById("Sample").innerHTML = "The onmouseover event is not
cancellable";
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อวางเมาส์เหนือปุ่ม CLICK IT -
ขั้นแรกเราได้สร้างปุ่ม CLICK IT ซึ่งเมื่อวางเมาส์ไว้เหนืออ็อบเจกต์เหตุการณ์ ommouseover ไปยังเมธอด cancelFunction(event)
<button onmouseover="cancelFunction(event)">CLICK IT</button>
เมธอด cancelFunction(event) จะตรวจสอบค่า event.cancelable สำหรับอ็อบเจ็กต์เหตุการณ์ที่ส่งผ่านและกำหนดให้กับตัวแปร x ใช้คำสั่งแบบมีเงื่อนไขตรวจสอบว่า event.cancellable ส่งคืนจริงหรือเท็จ จากนั้นแสดงข้อความที่เหมาะสมในแท็กย่อหน้าซึ่งมี id เท่ากับ "ตัวอย่าง" -
function cancelFunction(event) {
var x = event.cancelable;
if(x==true)
document.getElementById("Sample").innerHTML = "The onmouseover event is cancellable";
else
document.getElementById("Sample").innerHTML = "The onmouseover event is not cancellable";
} 