dialog元素不派发toggle事件，仅支持show、close、cancel三个原生事件；其中show在showModal()后触发，close在所有关闭场景下触发，cancel仅在Esc或backdrop关闭前触发且可阻止。
dialog 没有 toggle 事件，别白等了
HTML 元素本身不派发 toggle 事件——这个事件根本不存在。你查 MDN、翻规范、监听 dialog.addEventListener('toggle', ...) 都不会触发。常见误判是把 show / close / cancel 事件记混，或受其他框架（如 Vue 的 v-show）影响产生了命名联想。
真正可用的原生事件只有三个：
-
show：在showModal()或show()调用后、对话框渲染完成时触发（注意：不是点击按钮那一刻） -
close：无论用户点遮罩、按 Esc、调用close()还是表单提交，只要模态状态结束就触发 -
cancel：仅当用户按 Esc 或点击 backdrop（且未被阻止）时触发；它发生在close之前，可e.preventDefault()阻止关闭
多层 dialog 堆叠时，如何准确知道哪个刚被打开？
浏览器不暴露“当前最顶层”对话框的 API，document.activeElement 可能是内部 input，document.querySelector('dialog[open]') 返回的是所有已打开的，不是“最新那个”。靠 DOM 顺序或 z-index 排序不可靠，因为 showModal() 的堆叠逻辑由浏览器私有栈控制，不反映在 CSS 层级上。
必须手动维护一个打开顺序栈：
- 定义全局数组：
const openDialogs = [] - 每次调用
dialog.showModal()前，先openDialogs.push(dialog) - 监听每个 dialog 的
close事件，在回调里openDialogs.pop()（前提是严格按 LIFO 关闭）或openDialogs.splice(openDialogs.indexOf(dialog), 1)（支持任意顺序关闭） - 当前最顶层就是
openDialogs[openDialogs.length - 1]
漏掉一次 push 或 pop，栈就错位——尤其注意异步关闭（如 fetch 后才 close）和多次快速点击触发重复 showModal() 的竞争条件。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
为什么监听 click 判断 e.target === dialog 在 Safari 里经常失效？
Safari 15.4–17.6 中，点击 backdrop 时 e.target 经常是 document.body 或 ，而不是 。这不是 bug，是 Safari 对 ::backdrop 伪元素事件冒泡的实现差异——它压根不把点击事件委托给 dialog 元素。
兼容写法必须 fallback 到坐标判断：
- 只对
showModal()的 dialog 生效；show()没 backdrop，这段逻辑无意义 - 监听
dialog.addEventListener('click', e => { const rect = dialog.getBoundingClientRect(); if (e.clientX rect.right || e.clientY rect.bottom) dialog.close(); }) - 别在
close事件里再调dialog.close()，会报错 “The element is not in the open state”
多个 dialog 共用同一个关闭逻辑时，容易踩哪些坑？
直接复用函数名或内联 handler 看似省事，但极易导致作用域错乱或关闭错对象：
- 循环绑定时没用闭包或
data-dialog-id，导致所有按钮都关最后一个 dialog - 用
querySelectorAll('dialog')批量加事件，但没区分是showModal()还是show()，结果非模态 dialog 也被加上 backdrop 关闭逻辑 - 在
close回调里读取this，但在箭头函数或 addEventListener 中this不指向 dialog —— 改用e.currentTarget更安全 - 忘记清理事件监听器：同一 dialog 多次打开/关闭后，
close事件可能被重复绑定，触发多次清理逻辑
最稳的方式是每个 dialog 实例初始化时，独立绑定自己的 show、close、click 处理器，并用 WeakMap 存关联状态，避免全局污染和内存泄漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
