:focus-within不能直接实现“点击任意处关闭弹窗”，因为它仅响应焦点进出，不监听点击事件或鼠标位置；其关闭效果实为焦点流失所致，且在Firefox中存在兼容性问题，无法可靠响应空白区域点击。
为什么:focus-within不能直接实现“点击任意处关闭弹窗”
:focus-within 是一个伪类，它在元素自身或其任意后代获得焦点（focus）时生效。它本身不响应点击事件，也不监听鼠标位置或事件冒泡路径——所以它无法“检测点击是否发生在弹窗外”。把它当 click-outside 的替代方案，属于典型误用。
常见错误现象是：弹窗一打开就立刻关闭，或者点击弹窗内部按钮没反应。这是因为开发者试图给 body 或遮罩层加 :focus-within 并配合 tabindex，但实际焦点从未真正落到目标容器上，或焦点被输入框/按钮意外抢走，导致样式错乱。
真正能靠 :focus-within 做的，只有「视觉假象」：即不依赖 JavaScript 监听 click，仅靠焦点流转 + CSS 控制显隐，模拟出“失焦即关闭”的效果。这要求整个交互链严格可控。
必须满足的三个前提条件
想让 :focus-within 看起来像“点外面关闭”，得把弹窗变成一个可聚焦、且焦点只在它内部流转的封闭区域：
立即学习“前端免费学习笔记（深入）”；
- 弹窗容器（如
.modal）必须有tabindex="-1"，否则无法主动获取焦点 - 弹窗内至少有一个可聚焦子元素（如
<button>、<input>或带tabindex="0"的元素），否则焦点进不去，:focus-within永远不触发 - 页面其他可聚焦元素（比如导航链接、搜索框）在弹窗打开时，必须暂时移除
tabindex或设为disabled，否则用户按 Tab 键会跳出弹窗，导致焦点丢失、弹窗意外关闭
最小可行 CSS 实现（无 JS）
以下代码仅用纯 CSS 实现“点击弹窗内部保持显示，点击外部任何地方（包括空白）后，弹窗淡出”——前提是用户操作符合上述前提（例如：弹窗打开后，焦点自动落在第一个按钮上，且页面其余部分不可聚焦）：
.modal {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.modal:focus-within {
opacity: 1;
pointer-events: auto;
}
对应 HTML 结构示例：
<div class="modal" tabindex="-1">
<div class="modal-content">
<h2>确认删除？</h2>
<button>取消</button>
<button>确定</button>
</div>
</div>
注意：pointer-events: none 在初始状态禁用所有鼠标交互，避免用户在未聚焦时误点；:focus-within 触发后才恢复。这个“关闭”不是真由点击触发，而是由焦点离开整个 .modal 容器导致——比如用户点了地址栏、切了窗口、按了 Esc，甚至点了页面中某个被临时 disabled 的链接（此时焦点无处可去，自然从 .modal 流失）。
容易被忽略的兼容性与行为陷阱
这个方案在 Safari 15.4+ 和 Chrome 100+ 表现稳定，但在 Firefox 中存在已知问题：:focus-within 对 tabindex="-1" 元素的支持不一致，有时需额外加 outline: none 防止焦点环干扰布局。
更关键的是：它无法响应鼠标点击空白处的意图。用户点击非可聚焦区域（如一段纯文本、<p> 标签、空白 <div>），焦点不会移动，:focus-within 不会失效，弹窗也不会关闭——这和“点击任意处关闭”的预期严重不符。
所以，如果你需要真实响应鼠标点击位置、兼容所有浏览器、支持触屏设备、允许页面保留原有焦点逻辑，:focus-within 就不该出现在你的主流程里。它只适合极简场景：比如单页工具、无障碍要求低、且你能完全控制焦点流向的弹窗组件。
