原生 <dialog> 调用 showModal() 后默认支持 Esc 关闭，但需满足：必须用 showModal()（非 show()）、<dialog> 须在 body 直接子级且无隐藏祖先、不可提前阻止 keydown；自定义逻辑需在 showModal() 后监听 keydown 捕获阶段并 preventDefault()；Safari 移动端无 Esc 键，须提供显式关闭按钮并手动管理焦点回退。
dialog 元素默认就支持 Esc 关闭，但需要满足前提条件
原生 <dialog> 在调用 showModal() 后，Esc 键自动触发 close 事件并关闭弹窗——这是浏览器内置行为，无需额外监听。但很多人发现按 Esc 没反应，问题几乎都出在「没真正以模态方式打开」。
- 必须用
showModal()，不是show()（后者不启用 Esc 关闭、不拦截背景点击、无焦点锁定） -
<dialog>必须在 document body 直接子级（或至少不在display: none/visibility: hidden的祖先内） - 若 dialog 内部有
contenteditable或已聚焦的<input>，Esc 仍会关闭——除非你主动event.preventDefault()干预了keydown
如何自定义 Esc 关闭逻辑（比如阻止关闭、或加确认）
直接监听 keydown 捕获阶段，在 <dialog> 上判断 event.key === 'Escape'，然后 preventDefault() 即可拦截默认关闭行为。注意：必须在 showModal() 之后绑定，否则元素可能还没激活。
const modal = document.querySelector('dialog');
modal.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
e.preventDefault(); // 阻止默认关闭
if (confirm('确定要退出？')) modal.close();
}
});
- 不要监听
close事件来“取消关闭”——它在关闭完成后才触发，无法阻止 - 若用
showModal()后立即绑定，某些浏览器（如旧版 Safari）可能漏掉首次 Esc，建议加个微任务延迟：queueMicrotask(() => modal.addEventListener(...))
移动端或 Safari 中 Esc 行为异常的处理
Safari（尤其是 iOS）不触发键盘事件中的 Escape，因为软键盘没有 Esc 键；桌面 Safari 也常因系统快捷键冲突导致失效。这不是代码问题，而是平台限制。
- 不要依赖 Esc 作为唯一关闭方式——必须提供显式的关闭按钮（如
<button onclick="modal.close()">×） - 对移动设备，可监听
blur或focusout配合document.activeElement判断是否失焦到 dialog 外，作为辅助关闭策略 - 检测 Safari 时可降级使用
show()+ 手动管理 backdrop 和 focus，但会失去原生模态语义和无障碍支持
dialog.close() 触发后，focus 不会自动回退到触发元素
这是最容易被忽略的细节：原生 close() 不恢复焦点，容易造成键盘用户迷失。必须手动处理，否则不符合 WCAG。
立即学习“前端免费学习笔记（深入）”；
- 记录打开前的
document.activeElement，并在close事件中.focus()回去 - 若触发元素已被移除，需 fallback 到最近的可聚焦祖先（如
modal.parentNode.querySelector('[tabindex], button, a')） - 避免在
close事件里直接focus()，某些浏览器会报错（如 Firefox 对隐藏元素），应包裹setTimeout(() => el.focus(), 0)
