TAB键长按keydown场景下tabindex聚焦对象选择异常问题求解

现有代码问题说明 #

1. 手动计算下一个聚焦元素的逻辑和原生浏览器TAB跳转逻辑不一致
   你用$currItem.find("li").first()找下一个聚焦对象的逻辑完全错误：浏览器原生TAB跳转是按照页面中所有tabindex >= 0的元素的DOM先后顺序来排序的，不是仅查找当前聚焦元素的子级li，所以必然会跳过正确的目标元素。
   另外你的判断逻辑存在语法错误：hasClass()方法仅支持传入单个类名作为参数，你传入#menubar > li这种CSS选择器永远会返回false，这部分判断逻辑完全没有生效。

2. keydown阶段取不到跳转后元素的解决方案
   你要在keydown阶段拿到和keyup阶段一致的跳转后聚焦元素，不需要完全重构原有逻辑，有两种成熟的实现方案：

• 方案一：异步延迟执行原有逻辑（改造成本最低）
  利用JS事件循环机制，把你原本写在keyup里的逻辑包裹在setTimeout延迟0毫秒的回调中执行即可，示例代码如下：

// keydown事件处理函数
function handleTabKeydown(e) {
  if (e.key !== 'Tab') return
  // 等待浏览器完成默认TAB跳转后再执行原有逻辑
  setTimeout(() => {
    // 直接复用你之前写在keyup里的原有代码即可
    showMenuWithTabForward()
  }, 0)
}

setTimeout的回调会被推到事件队列末尾，等浏览器完成当前的TAB默认聚焦跳转行为后才会执行，此时取到的document.activeElement和keyup阶段完全一致，短按、长按TAB场景都能完美兼容，不需要修改你原来的业务逻辑。

• 方案二：阻止默认行为，手动控制聚焦顺序（可控性最高）
  如果你想完全掌握TAB跳转的控制权，可以直接在keydown阶段阻止浏览器默认跳转行为，自己提前维护好所有带tabindex=0的li元素的顺序数组，每次按下TAB时手动计算下一个聚焦元素：

// 提前按DOM顺序缓存所有可聚焦的li元素
const focusableLis = Array.from(document.querySelectorAll('li[tabindex="0"]'))

function handleTabKeydown(e) {
  if (e.key !== 'Tab') return
  // 阻止浏览器默认TAB跳转
  e.preventDefault()
  const currIndex = focusableLis.indexOf(document.activeElement)
  // 支持SHIFT+TAB反向跳转
  const nextIndex = e.shiftKey ? currIndex - 1 : currIndex + 1
  // 边界判断，支持循环跳转
  const targetIndex = nextIndex < 0 ? focusableLis.length - 1 : nextIndex % focusableLis.length
  focusableLis[targetIndex].focus()
  // 执行你的其他业务逻辑
  showMenuWithTabForward()
}

这种方案不会受浏览器默认行为的影响，长按、组合键场景都能稳定运行。

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