原生 dialog 模态框点击遮罩不会自动关闭，需手动监听 click 事件并判断 e.target === dialogel 才调用 close()；close() 触发 close 事件，esc 或点击遮罩触发 cancel 事件，二者均需监听。

dialog 模态框必须手动调用 close() 才会关闭，没有“点击遮罩自动关”这种默认行为——这是最常被误解的一点。

为什么点了遮罩没反应？

原生 dialog 的 backdrop（灰色遮罩）本身不带关闭逻辑。即使你用了 showModal()，点击它也不会触发任何动作，除非你显式监听并处理。

• 常见错误：只写 <dialog></dialog> + showModal()，以为“点了外面就关”，结果用户只能按 Esc 或点内部按钮
• 正确做法：监听 click 事件，且严格判断 e.target === dialogEl —— 只有点击 backdrop 本体才关，点内部任意子元素（包括按钮、图片、表单）都不应触发
• 注意：如果 dialog 不是 的直接子元素（比如被包在 <div class="app"> 里），backdrop 可能根本不会渲染，此时 <code>e.target === dialogEl 永远为 false

  close() 触发什么事件？

  调用 dialog.close() 会同步触发 close 事件，但不会触发 cancel 事件；而按 Esc 或点击 backdrop 关闭时，触发的是 cancel 事件。

  

  html-to-pptx-converter

  使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

  下载
  • 想统一清理逻辑？两个事件都监听：dialog.addEventListener('close', handler) 和 dialog.addEventListener('cancel', handler)
  • 别只监听 close 就以为覆盖全部关闭路径——Esc 和 backdrop 点击走的是 cancel
  • dialog.returnValue 在 close() 后可读取（比如表单设 method="dialog" 提交后），但 cancel 时它为空字符串

  怎么阻止点击 backdrop 关闭？

  不能靠 event.stopPropagation()，这会同时禁掉 Esc 关闭和屏幕阅读器焦点跳转，属于可访问性破坏。

  • 真正安全的做法：监听 click，当 e.target === dialogEl 时，不调用 close()，仅此而已
  • 别阻止事件传播，也别 preventDefault() —— backdrop 本身的交互语义（如聚焦、键盘导航）必须保留
  • 若需视觉上“禁用 backdrop”，改用 CSS：dialog::backdrop { pointer-events: none; }，但注意 Safari 对该伪类支持有限，且仍需保留 cancel 事件监听以响应 Esc

  最容易被忽略的细节：关闭后记得检查 dialog.open 属性是否已变回 false，某些旧版 Safari 在快速连续开关时会出现状态不同步，影响后续 showModal() 调用。