JavaScript：距目标元素N个Tab步长时触发回调（适配智能预取）

核心思路 #

基于浏览器原生Tab导航的可聚焦元素顺序，预计算目标元素的前置触发位置，通过轻量的焦点监听与DOM变化追踪，实现低开销的预触发逻辑。

关键实现步骤 #

1. 预计算可聚焦元素列表 #

先获取页面中所有符合Tab导航规则的可聚焦元素，仅在DOM更新时重新生成，避免重复查询：

function getTabbableElements() {
  return Array.from(document.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  )).filter(el => {
    const style = window.getComputedStyle(el);
    return style.display !== 'none' && style.visibility !== 'hidden' && !el.disabled;
  });
}

注：该选择器覆盖所有原生可聚焦元素，同时过滤掉不可见、禁用的元素，确保列表与实际Tab顺序完全一致。

2. 构建触发映射与监听逻辑 #

通过类封装逻辑，提前建立触发元素索引与目标回调的映射，减少焦点变化时的计算开销：

class TabPrefetcher {
  constructor() {
    this.tabbableList = getTabbableElements();
    this.triggerMap = new Map(); // key: 触发元素索引, value: 对应回调数组
    
    // 监听DOM变化，按需更新可聚焦列表
    this.domObserver = new MutationObserver(() => {
      this.tabbableList = getTabbableElements();
    });
    this.domObserver.observe(document.body, { 
      childList: true, 
      subtree: true, 
      attributes: true,
      attributeFilter: ['disabled', 'tabindex', 'style']
    });
  }

  // 注册目标元素与预触发规则
  register(targetEl, n, callback) {
    const targetIndex = this.tabbableList.indexOf(targetEl);
    if (targetIndex === -1) return; // 目标元素不可聚焦，直接忽略
    
    const triggerIndex = targetIndex - n;
    if (triggerIndex < 0) return; // 触发位置超出有效范围，忽略

    if (!this.triggerMap.has(triggerIndex)) {
      this.triggerMap.set(triggerIndex, []);
    }
    this.triggerMap.get(triggerIndex).push(callback);
  }

  // 启动焦点监听
  start() {
    this.handleFocus = (e) => {
      const currentIndex = this.tabbableList.indexOf(e.target);
      if (this.triggerMap.has(currentIndex)) {
        this.triggerMap.get(currentIndex).forEach(cb => cb());
      }
    };
    // 捕获阶段监听，确保预取在用户交互前完成
    document.addEventListener('focus', this.handleFocus, true);
  }

  // 销毁资源
  destroy() {
    this.domObserver.disconnect();
    document.removeEventListener('focus', this.handleFocus, true);
  }
}

3. 核心性能优化点 #

• 减少DOM查询：仅在DOM结构或元素状态（禁用、可见性等）变化时，重新生成可聚焦元素列表。
• 提前映射计算：注册阶段就计算好触发索引与回调的对应关系，焦点变化时仅做一次索引查找。
• 捕获阶段监听：在事件捕获阶段处理focus事件，比冒泡阶段更早触发，确保预取操作优先执行。
• 批量回调执行：同一触发点的多个回调批量执行，避免重复遍历。

使用示例 #

// 初始化预取器
const tabPrefetcher = new TabPrefetcher();

// 假设页面中有8个带.tabbable类的可聚焦元素，目标为第6个（索引5）
const targetEl = document.querySelectorAll('.tabbable')[5];

// 注册规则：聚焦前2个元素（索引3）时触发预取
tabPrefetcher.register(targetEl, 2, () => {
  // 执行预取逻辑，比如加载目标元素对应的内容
  console.log('预取第6个元素的内容');
});

// 启动监听
tabPrefetcher.start();

边界情况处理 #

• 动态DOM更新：通过MutationObserver自动同步可聚焦元素列表，确保规则在页面变化后依然有效。
• 无效目标元素：注册时检查目标元素是否在可聚焦列表中，忽略不可聚焦的元素。
• 触发索引越界：当N大于目标元素的索引时，直接跳过注册，避免错误触发。

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