原生JS实现多级导航焦点控制

以下是一个健壮、解耦、生产就绪的实现方案：

✅ 步骤 1：定义可聚焦元素选择器

为兼容各类语义化标签，采用标准 CSS 选择器匹配所有可聚焦元素：

const FOCUSABLE_SELECTOR = 
  'button:not([disabled]), a[href]:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';

⚠️ 注意：务必排除 tabindex="-1"（仅程序聚焦用）及禁用状态元素，避免逻辑错误。

✅ 步骤 2：封装焦点捕获逻辑（核心函数）

/**
 * 在指定容器内启用焦点循环捕获
 * @param {Element} container - 当前活跃的面板 DOM 元素
 */
function trapFocusIn(container) {
  const focusables = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
  if (focusables.length === 0) return;

  const first = focusables[0];
  const last = focusables[focusables.length - 1];

  // 移除旧监听器（防重复绑定）
  container.removeAttribute('data-trap-id');
  container.addEventListener('keydown', handleKeydown);

  function handleKeydown(e) {
    if (e.key !== 'Tab') return;

    // Shift+Tab：从第一个跳到最后一个
    if (e.shiftKey) {
      if (document.activeElement === first) {
        e.preventDefault();
        last.focus();
      }
    } 
    // Tab：从最后一个跳到第一个
    else {
      if (document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  }

  // 首次打开时主动聚焦首个可聚焦项（提升 UX）
  first.focus();
}

✅ 步骤 3：与面板生命周期联动

将 trapFocusIn() 注入你的现有状态管理逻辑中。例如，在 openHamburgerMenu() 和 nextTopic() 中调用：

function openHamburgerMenu() {
  navigation.classList.add("n-navigation--active");
  navigationBlur.classList.remove("n-navigation__blur--hide");
  navigationBlur.classList.add("n-navigation__blur--show");
  this.setAttribute("aria-expanded", "true");

  // 启用主面板焦点捕获
  trapFocusIn(mainContainer);
}

function nextTopic(e) {
  const panel = e.currentTarget.nextElementSibling;
  panel.classList.add("n-navigation__mobile__mainContainer__mainList__panel--active");

  // 启用新面板焦点捕获（自动移除旧面板监听）
  trapFocusIn(panel);
}

function previousTopic(e) {
  const panel = e.currentTarget.closest('.n-navigation__mobile__mainContainer__mainList__panel');
  if (panel) {
    panel.classList.remove("n-navigation__mobile__mainContainer__mainList__panel--active");
    // 可选：恢复上一级面板焦点捕获
    const parentPanel = panel.parentElement.closest('.n-navigation__mobile__mainContainer__mainList__panel');
    if (parentPanel) trapFocusIn(parentPanel);
  }
}

✅ 进阶建议：支持方向键导航（可选）

若需支持 ArrowUp/ArrowDown 在列表项间移动（如垂直菜单），可在 handleKeydown 中扩展：

else if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
  e.preventDefault();
  const currentIndex = focusables.indexOf(document.activeElement);
  let nextIndex = currentIndex;

  if (e.key === 'ArrowDown') {
    nextIndex = (currentIndex + 1) % focusables.length;
  } else {
    nextIndex = (currentIndex - 1 + focusables.length) % focusables.length;
  }

  focusables[nextIndex].focus();
}

? 关键注意事项

• 性能与内存：每次调用 trapFocusIn() 前应清理旧监听器（通过 removeAttribute('data-trap-id') 或维护监听器引用），避免事件堆积。
• ARIA 同步：确保 aria-hidden="true" 应用于非活跃面板，aria-modal="true"（若为模态）；当前活跃面板需有 aria-expanded="true"。
• 关闭时释放焦点：在 closeMenu() 中，应将焦点返回至触发按钮（如汉堡图标），并清除所有 trap 监听器：

  hamburgerMenuBtn.focus();
  mainContainer.removeEventListener('keydown', handleKeydown);

• 测试验证：使用键盘（Tab/Shift+Tab/方向键）全程操作，同时开启 NVDA/JAWS 屏幕阅读器验证语义流。

通过以上结构化实现，你无需依赖 Map 缓存或复杂 ID 映射，即可让任意深度的导航面板具备一致、可靠、可访问的焦点控制能力——真正践行“渐进增强”与“无障碍优先”的现代前端工程实践。

理论要掌握，实操不能落！以上关于《原生JS实现多级导航焦点控制》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！