阻止Esc关闭dialog的唯一可靠方式是在cancel事件中调用preventDefault()，且仅对showModal()打开的dialog生效；需确保监听器在showModal()前绑定、dialog已挂载并聚焦。
dialog按Esc关闭是浏览器原生行为，preventDefault无效
直接给 dialog 元素绑定 keydown 事件并调用 event.preventDefault()，对 Esc 键不起作用。这是因为浏览器在捕获阶段就处理了 Esc 关闭逻辑，且该行为不经过 dialog 自身的事件流——它实际监听的是 document 或顶级焦点上下文，且是不可取消的默认行为。
阻止Esc关闭dialog的唯一可靠方式：禁用dialog的closeOnEscape特性
标准 <dialog> 没有内置开关，但可以通过拦截其内部关闭触发机制来实现。核心思路是：不让浏览器进入“可关闭状态”。最稳定的做法是移除 open 属性后立即重新添加，或更推荐——用 showModal() 手动控制，并配合 event.preventDefault() 在 cancel 事件中阻断：
-
dialog触发cancel事件（Esc 或点击 backdrop）时，event.preventDefault()是**有效且被规范支持的** - 必须在
cancel事件中调用，不是keydown、也不是close - 仅对
showModal()打开的 dialog 生效；show()打开的 dialog 不触发cancel事件
const modal = document.querySelector('dialog');
modal.addEventListener('cancel', (e) => {
e.preventDefault(); // ✅ 这里有效
});
modal.showModal(); // ⚠️ 必须用 showModal()
cancel事件里preventDefault失败的常见原因
看似写了 preventDefault() 却仍被关闭，大概率是以下情况之一：
- dialog 是用
show()打开的，不是showModal()——show()不触发cancel事件，也就无法拦截 - 事件监听器绑定太晚，比如在
showModal()之后才加cancel监听 —— 浏览器可能在监听器注册前就已响应 Esc - 多个
cancel监听器中某个抛错，导致后续执行中断（包括你的preventDefault()） - dialog 尚未插入 DOM 或未获得焦点 ——
showModal()要求元素在 DOM 中且可聚焦，否则行为不可靠
替代方案：禁用Esc键全局监听（不推荐但可行）
如果 cancel 事件方案受限（如需兼容旧版 polyfill），可退而求其次，在 document 级拦截 Esc，但需谨慎：
立即学习“前端免费学习笔记（深入）”；
- 只在 dialog 显示时启用：
modal.open && event.key === 'Escape'才preventDefault() - 必须同时阻止冒泡：
event.stopPropagation()，否则可能干扰其他逻辑 - 注意焦点管理：若 dialog 内无聚焦元素，Esc 可能根本不会触发 document 的 keydown —— 浏览器只在有焦点的可交互上下文中响应 Esc
- polyfill（如 dialog-polyfill）行为不一致，有些完全忽略
cancel事件，此时只能靠全局 keydown + 状态标记
真正要拦住 Esc，关键不在“怎么写 preventDefault”，而在“在哪写、对谁写、什么时候写”。cancel 事件是标准给出的唯一可拦截入口，其他路径都是绕弯子，且容易漏 case。
