在 javascript 事件捕获与冒泡中，判断事件是否可取消的核心方法是调用 event 对象的 cancelable 属性。该属性返回一个布尔值：若为 true，表示可以通过 preventdefault() 阻止默认行为；若为 false，则无法通过该方法取消。开发者只需检查 event.cancelable 的值即可确定当前事件是否支持取消操作。
如何检查特定事件的 cancelable 属性值
要检查特定事件（如 click 或 submit）的 cancelable 属性，可以在事件监听器内部直接访问 event.cancelable。例如，对于 click 事件，其 cancelable 通常为 true，意味着可以阻止默认的点击行为（如链接跳转）。而对于 load 事件，其 cancelable 通常为 false，无法被取消。以下代码演示了如何在 click 事件中检查并处理 cancelable 属性。
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Is cancelable:', event.cancelable);
if (event.cancelable) {
// 执行取消逻辑
event.preventDefault();
console.log('Default action prevented.');
} else {
console.log('This event cannot be canceled.');
}
});
// 模拟点击按钮
button.click();
运行上述代码后，控制台将输出：Is cancelable: trueDefault action prevented.
不同事件类型的 cancelable 属性差异
不同事件类型的 cancelable 属性值存在显著差异。例如，keydown 和 keyup 事件的 cancelable 为 true，允许阻止默认按键行为（如页面滚动）。而 DOMContentLoaded 事件的 cancelable 为 false，无法被取消。以下代码对比了 keydown 和 DOMContentLoaded 事件的 cancelable 属性。
立即学习“Java免费学习笔记（深入）”；
// 检查 keydown 事件
window.addEventListener('keydown', function(event) {
console.log('keydown cancelable:', event.cancelable); // true
});
// 检查 DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOMContentLoaded cancelable:', event.cancelable); // false
});
// 触发 keydown 事件
const keyEvent = new KeyboardEvent('keydown', { bubbles: true, cancelable: true });
document.dispatchEvent(keyEvent);
// 触发 DOMContentLoaded 事件
const domEvent = new Event('DOMContentLoaded', { bubbles: true, cancelable: false });
document.dispatchEvent(domEvent);
运行上述代码后，控制台将输出：keydown cancelable: trueDOMContentLoaded cancelable: false
基于 preventDefault() 调用结果的验证问题
当尝试对不可取消的事件调用 preventDefault() 时，浏览器不会抛出错误，但也不会执行任何操作。例如，对 DOMContentLoaded 事件调用 preventDefault() 是无效的。以下代码验证了这一行为。
document.addEventListener('DOMContentLoaded', function(event) {
event.preventDefault(); // 无效操作
console.log('preventDefault called on non-cancelable event.');
});
// 触发 DOMContentLoaded 事件
const domEvent = new Event('DOMContentLoaded', { bubbles: true, cancelable: false });
document.dispatchEvent(domEvent);
运行上述代码后，控制台将输出：preventDefault called on non-cancelable event.
