非模态浮层焦点易丢失是因浏览器不拦截焦点离开，需手动管理：打开时聚焦首元素，用focusout监听失焦，动态调整tabindex实现Tab绕圈，并确保关闭后精准归还焦点。
非模态浮层里focus为什么总“跑掉”
因为浏览器默认不拦截焦点离开浮层——非模态意味着用户能自由切换到其他可聚焦元素，focus自然会流走。这不是 bug，是规范行为。关键不是“锁住”，而是“感知+引导”。
常见错误现象：tab键跳过浮层、按Shift+Tab直接回到地址栏、浮层关闭后焦点丢失在页面顶部。
- 必须手动监听
focusin事件（不能只靠focus），捕获所有进入浮层内外的焦点变化 - 浮层打开后，立即将
focus设在第一个可交互元素上（如button或input），否则键盘用户无法操作 - 不要用
preventDefault()阻止focus事件——它不生效，且会破坏辅助技术兼容性
如何让tab在非模态浮层内“绕圈”而不逃逸
绕圈不是靠禁用跳转，而是动态控制tabindex。浮层激活时，把所有**不在浮层内**的可聚焦元素临时设为tabindex="-1"，浮层内部元素保持tabindex="0"或原值。
使用场景：工具提示、右键菜单、编辑弹窗等需短暂介入但不中断主流程的 UI。
- 用
document.querySelectorAll('a, button, input, select, textarea, [tabindex]')收集全部候选元素，排除浮层自身后代 - 保存原始
tabindex值（可能为undefined），关闭时还原，避免影响后续交互 - 注意
contenteditable元素和iframe内容——它们有自己的焦点树，需单独处理
focusout vs blur：哪个更适合监听浮层失焦
选focusout。它支持事件冒泡，能监听子元素失焦并向上透传；blur不冒泡，绑在浮层根节点上根本收不到内部按钮失焦事件。
性能影响很小，但兼容性要注意：focusout在旧版 Safari 中对某些 SVG 元素支持不稳定，若需兼容 iOS 12 以下，可降级为委托监听focusin并比对event.relatedTarget。
- 判断焦点是否移出浮层：
!floatingPanel.contains(event.relatedTarget) - 避免在
focusout里立刻调用focus()——这会触发同步重入，导致 Chrome 报Unable to preventDefault inside passive event listener - 如果浮层含表单，提交后应主动将焦点交还给触发按钮，而非任由其落在
body
无障碍（a11y）下aria-modal="false"的焦点管理要点
设aria-modal="false"是告诉屏幕阅读器“这不是模态框”，但焦点管理仍要人工维持逻辑连贯性。否则 NVDA 或 VoiceOver 会误判上下文，读出错误的父子关系。
容易被忽略的点：浮层关闭时，焦点必须明确归还——不能只靠element.focus()，得确认目标元素仍存在于 DOM 且offsetParent !== null。
- 记录触发浮层的元素（如
data-trigger-id），关闭时用document.getElementById()找回并聚焦 - 若触发元素已被移除，退而求其次聚焦最近的语义化兄弟节点（如
heading或nav） - 不要依赖
autofocus属性——它在 Safari 中对动态插入的浮层常失效
事情说清了就结束。真正难的不是代码怎么写，而是每次浮层打开/关闭时，都要想清楚“此刻用户眼睛看哪、手指在哪、脑子想什么”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
