focusin事件无法跨iframe冒泡，需通过iframe内监听+postmessage主动上报焦点变化，父页结合frameelement位置与屏幕信息归一化坐标。
focusin 事件无法跨 iframe 捕获焦点？用 delegated event + focus-visible 替代
原生 focusin 在跨 iframe 场景下不会冒泡到父页面，这是浏览器安全限制导致的。不能靠监听 document.addEventListener('focusin', ...) 一劳永逸地捕获所有子窗口焦点变化。
可行方案是：在每个 iframe 内部注入轻量级焦点上报逻辑，由父页面统一接收并映射坐标/设备标识。关键点在于避免直接操作 iframe 内 DOM（跨域会失败），改用 postMessage 主动上报。
- iframe 内脚本需检测
document.hasFocus()变化，或监听focusin后立即window.parent.postMessage({type: 'FOCUS_CHANGED', target: e.target.tagName}, '*') - 父页面监听
message事件，结合event.source判断来源 iframe，并记录event.source.frameElement.getBoundingClientRect()作为屏幕位置锚点 - 若需区分物理设备（如双屏笔记本+外接显示器），可补充
screen.availLeft和window.screenX偏移校准
移动端 touchstart 后无法触发 focus？加 tabindex 并禁用 user-select
Android Chrome 和 Safari 在 touchstart 后常跳过表单控件聚焦流程，尤其当元素无 tabindex 或被 user-select: none 阻断时。
必须显式设置可聚焦性，否则 :focus-visible 伪类和 document.activeElement 都不可靠。
- 给目标元素添加
tabindex="0"，且确保它不是display: none或visibility: hidden - 移除可能存在的
-webkit-user-select: none或user-select: none，否则 iOS Safari 会忽略触摸后的焦点逻辑 - 在
touchend后调用element.focus({preventScroll: true})，避免页面意外滚动打断操作流
多屏环境下 getBoundingClientRect 返回错误坐标？用 convertPointFromNodeToPage
当页面被缩放、或存在 CSS transform（如 scale(0.8)）、或跨显示器 DPI 不一致时，getBoundingClientRect() 返回的 left/top 是相对于当前视口的，不是物理屏幕坐标。
Chrome 115+ 和 Safari 16.4+ 支持 convertPointFromNodeToPage，能将节点坐标转换为设备独立像素下的全局位置，更适配多屏追踪。
- 优先使用
element.convertPointFromNodeToPage({x: 0, y: 0})获取左上角绝对坐标 - fallback 方案：手动补偿
window.visualViewport?.offsetLeft和screenLeft（注意 IE 不支持） - 避免依赖
pageX/pageY—— 它们只在事件中有效，且受滚动影响，不能代表元素静态位置
如何让键盘焦点和触控焦点行为一致？用 :focus-visible + pointer-events
键盘用户按 Tab 聚焦，触控用户点按聚焦，但默认样式和逻辑常不统一。例如触控后 :focus-visible 不触发，或键盘聚焦时出现多余轮廓线。
核心是分离输入意图判断与视觉反馈，而非强行统一 DOM 状态。
- 启用
focus-visiblepolyfill（如focus-visiblenpm 包），确保旧版浏览器也响应:focus-visible - 对触控设备，监听
pointerdown并临时添加data-focus-source="pointer"，CSS 中写[data-focus-source="pointer"]:focus { outline: none; } - 禁止在非交互元素（如
div）上滥用tabindex，否则会污染键盘导航流，反而破坏可访问性
跨屏幕焦点追踪真正的难点不在事件监听，而在坐标归一化和输入源可信度判断——不同设备、不同浏览器、不同缩放模式下，同一个“聚焦”动作对应的物理位置和用户意图可能完全不同。别试图用一套坐标系覆盖所有场景，先分清哪些数据必须精确（如点击热区），哪些可以容忍偏差（如粗略设备归属）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
