最稳方案是document click捕获+modal ref+contains判断+卸载清理：监听document点击事件（捕获阶段），用modal.contains(event.target)判断是否点击内部，组件卸载时清除监听，避免内存泄漏和误触发。
点击弹出层外部区域关闭，但点击弹出层本身不关闭
关键在于事件捕获阶段拦截点击，区分目标元素是否属于弹出层内部。直接给 document 绑 click 事件最常用，但必须用 event.target 判断点击位置——不能只靠 event.currentTarget 或冒泡后检查父级，否则容易误关。
常见错误是：给弹出层外层加 click 并 stopPropagation()，结果导致按钮、输入框等子控件无法响应点击；或者用 contains() 检查时没处理弹出层为 null 或未挂载的情况。
- 弹出层容器必须有明确的 DOM 引用（比如
const modal = document.getElementById('modal')），不能靠 class 名临时查询 - 监听要放在捕获阶段：
document.addEventListener('click', handler, true)，这样能在事件到达目标前就判断 - 判断逻辑写成：
!modal?.contains(event.target) && event.target !== modal，兼顾 modal 未渲染和点击 modal 自身两种边界
使用 focusout + blur 替代 click 的适用场景
当弹出层含可聚焦元素（如 input、button），且希望“失焦即关闭”时，focusout 更可靠——它在焦点离开整个弹出层范围时触发，不受点击位置干扰，也避免移动端点击穿透问题。
但注意：focusout 不会因点击空白处触发，只响应焦点转移；如果用户点击地址栏再切回页面，不会触发；且 Safari 对 focusout 在模态框内的支持曾有延迟 bug（iOS 15.4 之前）。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须给弹出层容器设
tabindex="-1"，否则无法触发focusout - 绑定在 modal 元素上：
modal.addEventListener('focusout', () => { modal.classList.remove('show') }) - 需配合
modal.focus()在打开时主动聚焦，否则首次打开后焦点不在 modal 内，focusout不会生效
pointer-events: none 配合 backdrop 关闭的陷阱
很多人用半透明遮罩（backdrop）覆盖全屏，再给 backdrop 设 pointer-events: none 来透传点击——这会导致点击 backdrop 区域根本不会触发任何事件，自然也无法关闭弹出层。
正确做法是：backdrop 必须保留 pointer-events: auto（默认值），并在其上监听 click；或者干脆不用 backdrop，只监听 document，靠 contains() 判断。
- 如果用了 backdrop，关闭逻辑应写在 backdrop 的
click事件里，而不是依赖透传 - 不要对 backdrop 设
opacity: 0后还指望它响应点击——透明 ≠ 不可点击，但opacity: 0不影响 pointer-events - 移动端要注意
touchstart和click的 300ms 延迟，若需即时响应，改用touchend并阻止默认行为
React/Vue 等框架中 ref 和事件清理的易漏点
框架里常把弹出层封装成组件，用 ref 拿 DOM 节点。但组件卸载时若没移除 document 上的全局监听，会造成内存泄漏和跨组件误触发。
另一个坑是：服务端渲染（SSR）时 document 不存在，直接绑定会报错；或弹出层条件渲染后 ref 为 null，contains() 报错。
- React 中用
useEffect返回清理函数：return () => document.removeEventListener('click', handler, true) - Vue 中在
onBeforeUnmount里移除监听，且 handler 必须是同一个引用（不能在 effect 里定义匿名函数） - 所有涉及
ref.current的操作前加空值检查：if (!modalRef.current) return
shadow DOM、是否被 transform 或 clip-path 截断，都会让 contains() 失效——这些细节，调试时得一个个排除。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
