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 处理，自己实现反而容易破坏可访问性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
