记忆游戏中使用tab index遍历DIV卡片如何保证TAB键顺序正确

问题原因说明 #

你遇到的遍历混乱问题基本都是手动设置大于0的tabindex导致的：大于0的tabindex优先级会高于页面所有默认可聚焦元素（按钮、链接、输入框等），且一旦tabindex数值和DOM节点排列顺序不匹配，就会出现跳转顺序异常，这是W3C规范里明确不推荐的用法。

方案1：DOM自然顺序实现（优先推荐） #

不需要手动指定tabindex序号，只要保证卡片的DOM排列顺序和你想要的TAB遍历顺序完全一致，统一给所有卡片设置tabindex="0"即可，TAB键会自动按照DOM从先到后的顺序遍历卡片，符合原生交互逻辑也没有兼容问题。

// 假设卡片类名为memory-card
const cards = document.querySelectorAll('.memory-card')
cards.forEach(card => {
  card.setAttribute('tabindex', '0')
  // 补充无障碍属性，适配键盘操作和读屏器
  card.setAttribute('role', 'button')
  card.setAttribute('aria-label', '记忆卡片，按回车或空格翻转')
})

如果当前DOM顺序和预期遍历顺序不符，先调整DOM节点的排列顺序即可，成本远低于手动控制焦点逻辑。

方案2：手动拦截TAB键控制焦点（仅用于DOM顺序无法调整的场景） #

如果因为布局要求没法调整DOM顺序，可以监听按键事件拦截TAB行为，手动控制焦点跳转顺序：

const cards = Array.from(document.querySelectorAll('.memory-card'))
// 初始化所有卡片默认不可被TAB捕获
cards.forEach(card => card.setAttribute('tabindex', '-1'))
// 默认首卡片可聚焦
cards[0].setAttribute('tabindex', '0')

cards.forEach((card, index) => {
  card.addEventListener('keydown', e => {
    // 拦截TAB键行为
    if (e.key === 'Tab') {
      e.preventDefault()
      const nextIndex = e.shiftKey 
        ? (index === 0 ? cards.length - 1 : index - 1) 
        : (index === cards.length - 1 ? 0 : index + 1)
      // 切换聚焦状态
      card.setAttribute('tabindex', '-1')
      cards[nextIndex].setAttribute('tabindex', '0')
      cards[nextIndex].focus()
    }
    // 补充回车/空格触发卡片翻转的标准键盘逻辑
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      // 这里替换为你自己的卡片翻转逻辑
      flipCard(card)
    }
  })
})

注意事项 #

• 不要混用大于0的tabindex值，会破坏页面原生无障碍导航逻辑
• 用DIV作为交互控件时必须补充role等无障碍属性，同时支持回车、空格触发操作，符合通用键盘操作规范

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