应严格判断点击目标是否为dialog自身：使用e.target === dialog，而非依赖class或backdrop伪元素；Safari 15.4–16.3中e.target可能为body，需结合e.clientX等坐标判断。
dialog点击遮罩关闭时误触内部按钮
直接给dialog绑click事件并调用close()，会导致点里面任何按钮（包括确认、取消）也触发关闭——因为按钮是dialog的子元素，事件冒泡上来就关了窗。
正确做法是严格判断点击目标是否为dialog自身：
- 用
e.target === dialog，而不是e.target.classList.contains('backdrop')（::backdrop根本不是真实 DOM 节点，没 class） - 不要写
dialog.addEventListener('click', () => dialog.close())，这等于无条件关窗 - Safari 15.4–16.3 有兼容问题：点击 backdrop 时
e.target可能始终是body，需 fallback 判断坐标，例如e.clientX
关闭按钮点击后弹窗闪一下又出现
这是典型的事件冒泡穿透：关闭按钮在dialog内，点击它触发close()，但事件继续向上冒泡到外层容器（比如一个div或button），又触发了“打开弹窗”的逻辑。
常见于 Vue/React 组件中把van-dialog或自定义弹窗写在按钮内部，而没阻断传播：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给关闭按钮的 click 处理函数第一行加
e.stopPropagation()，别用preventDefault()或return false - 如果用内联写法，必须显式传参：
@click.stop（Vue）或onclick="handleClose(event)"，并在函数里调e.stopPropagation() - 避免把
dialog嵌套在可交互父元素里；<dialog></dialog>应是body的直接子元素，否则模态行为（焦点锁、backdrop）可能不生效
监听 close 事件却读不到关闭原因
dialog.close()触发的close事件本身不区分关闭方式，dialog.returnValue只在显式传参时才有值。
想区分“用户点了确定”还是“点了遮罩”，必须主动控制关闭路径：
- 确认按钮调用
dialog.close('confirm')，取消按钮调用dialog.close('cancel') - 遮罩关闭时
returnValue为空字符串，所以close事件里要检查dialog.returnValue === ''来识别 - 别依赖
event.type === 'close'做分支——所有关闭都走这个事件，无法靠事件类型区分 - 注意：Safari ≤15.3 不支持 backdrop，需手动加 CSS：
dialog::backdrop { background: rgba(0,0,0,0.5); }，否则click监听失效
为什么 stopPropagation() 有时像没起作用
不是 API 失效，而是调用时机或上下文错了。最常踩的坑是：监听器绑在动态插入的节点上，但绑定发生在 DOM 插入前；或者用了捕获阶段监听，却在冒泡阶段才调stopPropagation()。
确保以下三点成立：
- 监听器必须通过
addEventListener绑定，且函数签名含event参数（不能写成ev或漏传） - 不能放在
setTimeout、Promise.then等异步回调里——事件早就冒泡完了 - 若父级用了
addEventListener('click', handler, true)（捕获阶段），子元素也得在捕获阶段调stopPropagation()才能拦住，否则无效
复杂组件里别无差别地全用stopPropagation()，它会切断事件委托链，也让外层无法做统一拦截或埋点——真正需要的是精准判断e.target再决定是否拦截。
