如何关闭基于HTML原生的dialog模态框弹窗交互事件？
- 内容介绍
- 文章标签
- 相关推荐
本文共计710个文字，预计阅读时间需要3分钟。
dialog模式框模板必须手动调用close()函数才关闭，没有点击遮罩自动关这种默认行为——这是最常见的误解之一。
为什么点了遮罩没反应？
原生 dialog 的 backdrop（灰色遮罩）本身不带关闭逻辑。即使你用了 showModal()，点击它也不会触发任何动作，除非你显式监听并处理。
- 常见错误：只写
<dialog></dialog>+showModal()，以为“点了外面就关”，结果用户只能按 Esc 或点内部按钮 - 正确做法：监听
click事件，且严格判断e.target === dialogEl—— 只有点击 backdrop 本体才关，点内部任意子元素（包括按钮、图片、表单）都不应触发 - 注意：如果
dialog不是<body>的直接子元素（比如被包在<div class="app">里），backdrop 可能根本不会渲染，此时e.target === dialogEl永远为 false
close() 触发什么事件？
调用 dialog.close() 会同步触发 close 事件，但不会触发 cancel 事件；而按 Esc 或点击 backdrop 关闭时，触发的是 cancel 事件。
本文共计710个文字，预计阅读时间需要3分钟。
dialog模式框模板必须手动调用close()函数才关闭，没有点击遮罩自动关这种默认行为——这是最常见的误解之一。
为什么点了遮罩没反应？
原生 dialog 的 backdrop（灰色遮罩）本身不带关闭逻辑。即使你用了 showModal()，点击它也不会触发任何动作，除非你显式监听并处理。
- 常见错误：只写
<dialog></dialog>+showModal()，以为“点了外面就关”，结果用户只能按 Esc 或点内部按钮 - 正确做法：监听
click事件，且严格判断e.target === dialogEl—— 只有点击 backdrop 本体才关，点内部任意子元素（包括按钮、图片、表单）都不应触发 - 注意：如果
dialog不是<body>的直接子元素（比如被包在<div class="app">里），backdrop 可能根本不会渲染，此时e.target === dialogEl永远为 false
close() 触发什么事件？
调用 dialog.close() 会同步触发 close 事件，但不会触发 cancel 事件；而按 Esc 或点击 backdrop 关闭时，触发的是 cancel 事件。