如何区分DOM的focusin事件触发源是TAB键还是Shift+TAB组合键

算力阿峰

2026-9-29

解决方案

首先明确：`focusin` 事件本身不携带键盘按键的相关信息，无法直接从事件对象中判断触发源是否为TAB/Shift+TAB按键，需要配合全局的键盘事件监听实现状态标记。

实现逻辑

提前声明两个全局变量，分别记录「最近的聚焦是否由TAB触发」、「TAB触发时是否同时按下Shift键」
监听全局keydown事件，当按下的键为TAB时，更新上述两个变量的状态
监听全局keyup事件，当TAB键抬起时，延迟重置状态，避免focusin触发晚于keyup导致的误判
在focusin的事件回调中读取预先记录的状态，做对应的分支处理

完整代码示例

// 全局状态标记
let isTabPressed = false;
let isShiftHeldWithTab = false;

// 监听键盘按下，记录TAB相关状态
document.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    isTabPressed = true;
    isShiftHeldWithTab = e.shiftKey;
  }
});

// 监听键盘抬起，延迟重置状态，避免边界误判
document.addEventListener('keyup', (e) => {
  if (e.key === 'Tab') {
    setTimeout(() => {
      isTabPressed = false;
      isShiftHeldWithTab = false;
    }, 100);
  }
});

// 原focusin监听逻辑
document.querySelector('#sample').addEventListener('focusin', function(){
  if(isTabPressed){
    if(isShiftHeldWithTab) {
      // Shift+TAB 反向遍历逻辑
    } else {
      // TAB 正向遍历逻辑
    }
  }else{
    // 其他触发方式（鼠标点击、触屏聚焦等）的逻辑
  }
});