cancel事件仅在esc键或backdrop点击时触发，不冒泡、不响应close()调用；需直接监听dialog元素，且仅showmodal()激活后生效，safari≤15.3等旧版需手动模拟。
dialog的cancel事件只在Esc或backdrop点击时触发
dialog元素原生支持cancel事件，但它**仅在用户主动取消模态交互时触发**：按 Esc 键、或点击 backdrop（灰层）区域。它不会在调用close()时触发，也不会响应remove()或open = false等无效关闭方式。
常见错误是误以为cancel等同于“用户点了取消按钮”——其实它只反映系统级中断行为，和业务逻辑里的“取消操作”是两回事。
必须用showModal()激活，show()不触发cancel事件
-
cancel事件只对showModal()生效；show()无此行为 - 若
<dialog></dialog>不是直接子元素，backdrop可能不渲染，导致点外部无法触发cancel - Safari ≤15.3 不支持
cancel事件（backdrop不可点击，也无事件）
监听cancel事件必须直接绑定到dialog实例
不能靠事件委托，也不能监听document或body来捕获——cancel事件不冒泡，且target始终是dialog元素本身。
正确写法：
const dialog = document.getElementById('myDialog');
dialog.addEventListener('cancel', (e) => {
e.preventDefault(); // 可选：阻止默认关闭（比如想弹二次确认）
console.log('用户中断了模态流程：Esc 或点击 backdrop');
});
错误写法：
-
document.addEventListener('cancel', ...)—— 事件根本不会到达document -
dialog.parentNode.addEventListener('cancel', ...)——cancel不冒泡，父节点收不到 - 在
showModal()之后才绑定监听器 —— 如果用户快速按Esc，事件可能丢失
cancel事件和close事件的区别与共存
cancel和close是两个独立事件，可同时存在，但触发条件不同：
-
cancel：仅 Esc / backdrop 点击 → 触发cancel，随后**自动触发close** -
close：所有关闭途径都会触发（包括cancel、close()、formmethod="dialog"提交） -
cancel中读不到dialog.returnValue，因为此时还没关闭完成；必须在close事件里读
典型组合用法：
dialog.addEventListener('cancel', () => {
// 记录中断行为，比如埋点
analytics.track('dialog_dismissed');
});
dialog.addEventListener('close', () => {
// 统一处理关闭后逻辑，此时才能安全读 returnValue
const result = dialog.returnValue;
if (!result) {
// 空字符串 → 很可能是 cancel 或 backdrop 关闭
}
});
兼容性差时如何模拟cancel行为
Safari 15.4 之前、部分旧版 Chrome，cancel事件不可靠，backdrop 点击甚至不触发任何事件。这时得手动补：
- 放弃
dialog::backdrop，改用一个同层级<div class="backdrop">覆盖全屏 <li>给该<code>backdrop加click监听，调用dialog.close('dismiss') - 同时监听
keydown捕获Escape键，同样调用close('dismiss') - 注意：
backdrop点击需用event.target === backdrop或!dialog.contains(event.target)判断，避免误判内部按钮
真正难处理的不是代码，而是语义混淆：用户按 Esc 和点“取消按钮”，业务上都算放弃操作，但技术上要走两条路径。别指望一个事件兜底，得在close里统一归因。
