dialog.close()触发close事件需满足：显式调用、Esc键或点击backdrop（且已手动处理）；必须先用showModal()/show()激活；监听器须在close()前绑定， returnValue须提前赋值，仅在close事件回调中读取。
dialog.close() 触发 close 事件的必要条件
close 事件不是每次关闭都自动触发——它只在显式调用 dialog.close()、用户按 Esc 键，或点击 backdrop（且你已手动处理该点击）时才触发。
单纯设置 dialog.open = false、调用 dialog.remove()、或用 CSS 隐藏（如 display: none），完全不会触发 该事件。
- 必须先用
showModal()（推荐）或show()激活 dialog，否则close()调用静默失败，也不报错 -
close()是同步方法：调用后立即触发事件，但监听器必须已绑定 - 如果在
dialog.close()之后才addEventListener('close', ...)，事件会丢失，读不到returnValue
如何正确监听 close 事件并读取 returnValue
监听必须直接挂在 dialog 元素上，不能靠事件委托；读取 returnValue 的唯一可靠时机，就是在 close 事件回调里访问 dialog.returnValue。
- 监听器可在
showModal()前、后任意时间绑定，只要早于close()调用 -
returnValue是字符串属性，不是函数返回值；它必须在close()之前赋值，例如：dialog.returnValue = 'confirm' -
dialog.close('confirm')是无效写法——close()不接受参数，传参会被忽略 - 如果没手动赋值，
returnValue默认是空字符串""，不是undefined或null
const dialog = document.getElementById('myDialog');
dialog.addEventListener('close', () => {
console.log('关闭结果:', dialog.returnValue); // ✅ 此时才能安全读取
});
为什么点了 backdrop 没触发 close 事件
原生 dialog 的 backdrop（灰色遮罩）默认不带任何关闭逻辑。Chrome/Edge 120+ 后支持通过 click 事件判断 e.target === dialog 来识别点击是否落在 backdrop 上，但 Safari 仍需额外处理。
- 不能只监听
click然后无条件调用close()，否则点内部按钮也会关 - 正确做法是严格比对：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - 注意：如果
dialog不是<body>的直接子元素（比如被包在<div id="app">里），backdrop可能压根不渲染，e.target === dialog永远为false - 点击
backdrop实际触发的是cancel事件，不是close；所以只监听close会漏掉这部分关闭路径
form method="dialog" 场景下 returnValue 的自动赋值规则
当 dialog 内部有 <form method="dialog"> 时，提交行为会自动触发 close() 并把 type="submit" 按钮的 value 赋给 returnValue，无需手动设。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 仅对
<button type="submit" value="confirm">生效；type="button"或普通<a>不参与自动赋值 - 表单提交后，
close事件仍会触发，此时dialog.returnValue就是按钮的value字符串 - 若表单含多个 submit 按钮，只有被点击的那个的
value会生效 - 自动赋值发生在
close()调用前，所以你在close事件里读到的值是可靠的
<form method="dialog"><button type="submit" value="save">保存</button><button type="submit" value="discard">丢弃</button></form><!-- 点"保存"后，close 事件中 dialog.returnValue === "save" -->
容易被忽略的一点：所有关闭路径（按钮、Esc、backdrop 点击）都应统一赋值再 close()，而不是依赖“自动”或“默认”。否则在 Safari 或快速连续开关时，dialog.open 状态可能不同步，导致后续 showModal() 失败。
立即学习“前端免费学习笔记（深入）”；
