如何区分键盘和鼠标获取焦点

本文深入探讨了如何在Web开发中准确区分用户是通过键盘操作（如Tab键）还是鼠标/触摸点击来获取元素焦点这一常见难题，指出原生focus事件无法直接提供触发方式信息，并系统剖析了基于mousedown/touchstart标志位配合focusin/focusout事件的可靠检测方案，同时批判性地否定了依赖event.detail等不可靠方法的误区；文章还特别强调了移动端兼容性、辅助技术适配以及可访问性最佳实践，强烈推荐优先使用浏览器原生: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 处理，自己实现反而容易破坏可访问性。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~