CSS如何判断焦点来源？键盘还是点击？

虽然CSS本身无法直接区分焦点是来自键盘操作还是鼠标点击，但通过JavaScript监听mousedown/touchstart与focusin事件并配合标志位管理，可稳定判断焦点来源；不过实践中更推荐优先使用原生:focus-visible伪类实现无障碍友好的视觉反馈，既避免手动判断的兼容性陷阱（如移动端触摸、屏幕阅读器支持问题），又保障了可访问性——毕竟真正关键的不是“如何区分”，而是“是否需要干预”，而浏览器已为此提供了更可靠、更语义化的解决方案。

focus 事件本身不区分触发方式

浏览器的 focus 事件（包括 focusin）在键盘 Tab、鼠标点击、JavaScript 调用 el.focus() 时都会触发，且事件对象里没有字段直接告诉你“这次是谁触发的”。硬查 event.type 或 event.target 没用——它们都一样。

真正能用的线索只有两个：一是 document.activeElement 切换前后的状态是否伴随鼠标事件；二是全局记录一次“最近是否有鼠标活动”。后者更稳定，也最常用。

用 mousedown + 标志位判断点击焦点

核心思路是：在 mousedown 时设一个临时标记，focus 触发时立刻检查它是否还有效（并及时清除）。这个标记不能靠延时清除，得用 blur 或 focusout 配合清理，否则容易误判。

• mousedown 事件监听器里设置 window.__isClickFocus = true
• focus 事件里检查 window.__isClickFocus === true，然后立即设为 false
• 加一个 focusout 监听器，在元素失焦时也清掉标志位，避免残留
• 注意：必须用 focusout（冒泡），不能只用 blur（不冒泡），否则嵌套容器内点击子元素会漏清

let isClickFocus = false;
document.addEventListener('mousedown', () => {
  isClickFocus = true;
});
document.addEventListener('focusin', (e) => {
  if (isClickFocus) {
    e.target.dataset.focusSource = 'click';
    isClickFocus = false;
  } else {
    e.target.dataset.focusSource = 'keyboard';
  }
});
document.addEventListener('focusout', () => {
  isClickFocus = false;
});

为什么不用 event.detail === 0 判断？

老办法常提“event.detail === 0 表示非鼠标触发”，但这是错觉。该值只在用户主动点击时为 1，而 el.focus() 调用、Tab 切换、甚至某些屏幕阅读器操作都会让它为 0 —— 完全不可靠。

• detail 是 MouseEvent 的属性，focus 事件根本不是 MouseEvent，访问 event.detail 在严格模式下是 undefined
• 即使你在 mousedown 里读 event.detail，也无法反推后续 focus 的来源
• Chrome 和 Safari 对该字段的处理也不一致，Firefox 更早弃用了它的语义

真实场景下的兼容性陷阱

移动端和辅助技术会让判断更复杂。比如 iOS Safari 点击输入框会先触发 focus 再弹出软键盘，但期间没有 mousedown（触摸屏用 touchstart）；又比如 VoiceOver 用户用摇杆聚焦，既不点也不按 Tab。

• 纯靠 mousedown 会漏掉触摸设备的点击，需同时监听 touchstart 并合并逻辑
• 无障碍场景下，应优先尊重 prefers-reduced-motion 和 forced-colors，而非强行区分焦点方式
• 若用于视觉反馈（如移除 outline），更稳妥的做法是：只在键盘操作时显示 outline，用 :focus-visible 原生伪类，而不是自己手写判断

真正难的不是“怎么区分”，而是“区分之后要不要响应”——很多所谓“点击不显示 outline”的需求，其实该交给浏览器原生的 :focus-visible 处理，自己实现反而容易破坏可访问性。

本篇关于《CSS如何判断焦点来源？键盘还是点击？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！