非模态浮层焦点易丢失是因浏览器不拦截焦点离开，需手动管理：打开时聚焦首元素，用focusout监听失焦，动态调整tabindex实现Tab绕圈，并确保关闭后精准归还焦点。
非模态浮层里focus为什么总“跑掉”
因为浏览器默认不拦截焦点离开浮层——非模态意味着用户能自由切换到其他可聚焦元素，focus自然会流走。这不是 bug，是规范行为。关键不是“锁住”，而是“感知+引导”。
常见错误现象：tab键跳过浮层、按Shift+Tab直接回到地址栏、浮层关闭后焦点丢失在页面顶部。
- 必须手动监听
focusin事件（不能只靠focus），捕获所有进入浮层内外的焦点变化 - 浮层打开后，立即将
focus设在第一个可交互元素上（如button或input），否则键盘用户无法操作 - 不要用
preventDefault()阻止focus事件——它不生效，且会破坏辅助技术兼容性
如何让tab在非模态浮层内“绕圈”而不逃逸
绕圈不是靠禁用跳转，而是动态控制tabindex。浮层激活时，把所有**不在浮层内**的可聚焦元素临时设为tabindex="-1"，浮层内部元素保持tabindex="0"或原值。
使用场景：工具提示、右键菜单、编辑弹窗等需短暂介入但不中断主流程的 UI。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 用
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 中对动态插入的浮层常失效
