如何判断focusin、focusout、focus事件是否由鼠标触发而非代码或键盘？

要区分focus、focusin、focusout这类焦点事件是鼠标触发，还是键盘操作/代码调用触发，核心思路是追踪鼠标操作的前置状态——因为鼠标触发焦点变化前必然会触发鼠标类事件（如mousedown、pointerdown），我们可以通过这些事件做临时标记，再在焦点事件中校验标记。

方法一：通过全局mousedown事件标记 #

给全局绑定mousedown事件设置临时标记，在焦点事件中检查标记后再重置：

let isMouseTriggered = false;

// 全局监听鼠标按下事件
document.addEventListener('mousedown', () => {
  isMouseTriggered = true;
  // 用0延迟setTimeout重置，确保焦点事件先读取标记
  setTimeout(() => {
    isMouseTriggered = false;
  }, 0);
});

// 监听目标元素的focusout事件
thing.addEventListener("focusout", (e) => {
    if (isMouseTriggered) {
        // 执行鼠标触发后的逻辑
        console.log('这是鼠标触发的focusout事件');
    }
});

方法二：利用Pointer事件精准判断鼠标类型 #

如果需要更精准区分鼠标、触摸、手写笔操作，可以用pointerdown事件的pointerType属性：

let lastPointerType = null;

document.addEventListener('pointerdown', (e) => {
  lastPointerType = e.pointerType;
  setTimeout(() => {
    lastPointerType = null;
  }, 0);
});

thing.addEventListener("focusout", (e) => {
    if (lastPointerType === 'mouse') {
        // 确认是鼠标触发的焦点事件
        console.log('这是鼠标触发的focusout事件');
    }
});

注意事项 #

• 这两种方法只能判断焦点变化的根源是鼠标操作，如果是鼠标点击后通过代码主动修改焦点（比如element.focus()），也会被判定为鼠标触发，这种场景属于正常关联操作，一般无需额外区分。
• 标记的延迟重置很关键：焦点事件和鼠标事件属于同一事件循环阶段，0延迟的setTimeout会把重置操作放到下一轮循环，保证焦点事件能先读取到标记。

内容的提问来源于stack exchange，提问作者ertucode