dialog 元素无 cancel 事件，仅触发 close 事件；ESC 关闭需通过监听 dialog 的 keydown 拦截并 preventDefault，再手动调用 close()；可用标志位或 returnValue 区分关闭原因；注意浏览器兼容性及 polyfill 对 ESC 处理的差异。
dialog 元素本身没有 cancel 事件
很多人在监听 dialog 关闭时，下意识写 dialog.addEventListener('cancel', ...)，结果发现完全不触发——因为标准中压根没定义这个事件。真正会触发的是 close 事件，它在用户点叉、点遮罩、按 ESC 或调用 close() 时统一触发。
但关键在于：close 事件无法区分关闭来源。ESC 关闭和手动调用 dialog.close() 都走同一个事件流，所以如果需要「仅对 ESC 做特殊处理」，得另想办法。
如何捕获 ESC 键并阻止默认关闭行为
ESC 键触发关闭是 dialog 的内置行为，想干预它，必须在键盘事件阶段拦截。注意：不能只监听 document，而要监听 dialog 自身（尤其当多个 dialog 叠加时）。
dialog.addEventListener('keydown', e => { if (e.key === 'Escape') { e.preventDefault(); /* 此时 dialog 不会自动关闭 */ } })- 拦截后若仍需关闭，得手动调用
dialog.close()或dialog.close('esc')（第二个参数是可选的返回值） - 务必在
showModal()之后再绑定事件，否则可能错过首次 ESC
区分 ESC 关闭和其他关闭方式的实用技巧
由于 close 事件不带原因标识，常见做法是用一个标志位临时标记「刚按过 ESC」：
立即学习“前端免费学习笔记（深入）”；
let isEscClosing = false;
dialog.addEventListener('keydown', e => {
if (e.key === 'Escape') {
e.preventDefault();
isEscClosing = true;
dialog.close('esc');
}
});
dialog.addEventListener('close', () => {
if (isEscClosing) {
console.log('用户按了 ESC');
isEscClosing = false;
return;
}
console.log('其他方式关闭');
});
这个模式简单有效，但要注意：如果用户快速连按 ESC 多次，或在 close 回调里又打开了 dialog，标志位可能错乱。更健壮的做法是结合 event.target.returnValue（仅限 close() 显式传参时可用），但前提是所有关闭都走 close() 调用，不依赖浏览器默认行为。
兼容性与 polyfill 的隐藏坑
Firefox 直到 v98 才支持 dialog，Safari 则长期缺失 ESC 支持（v15.4+ 才修复）。即使用了 polyfill（如 @github/details-dialog），ESC 行为也可能被忽略或未透传到 close 事件。
- 检查
dialog.showModal是否存在，不存在就 fallback 到div+ 手动管理 tabindex/aria-modal - polyfill 通常不模拟
keydownondialog，所以拦截 ESC 的代码在旧环境里可能根本不会执行 - 某些 polyfill 把 ESC 绑定在
document上，此时监听dialog自身的keydown就失效了
真正在意 ESC 行为一致性的话，别依赖原生 dialog 的默认逻辑，从一开始就自己接管键盘事件和关闭流程。
