如何防止点击树形控件元素时意外触发焦点事件-html教程-PHP中文网

如何防止点击树形控件元素时意外触发焦点事件

在实现 ARIA 树（tree）组件时，点击非首个节点会短暂触发 focusin 事件并错误选中首项——这是因浏览器默认在 mousedown 后自动聚焦可交互元素所致；需通过检测鼠标操作上下文来抑制该行为。

在实现 aria 树（tree）组件时，点击非首个节点会短暂触发 `focusin` 事件并错误选中首项——这是因浏览器默认在 `mousedown` 后自动聚焦可交互元素所致；需通过检测鼠标操作上下文来抑制该行为。

要彻底解决“点击末尾节点时首项闪现聚焦”的问题，关键在于区分焦点来源：是用户通过键盘（如 Tab）主动聚焦整个树容器，还是因鼠标点击某个子元素而被动触发的 focusin。原代码中 focusin 回调无差别执行首项选中，导致视觉闪烁。

✅ 正确做法：用 `mousedown` 标记鼠标操作上下文

在 focusin 触发前，我们需提前感知是否即将发生鼠标点击。由于 focusin 总是在 mousedown → focus → mouseup → click 流程中紧随 mousedown 后发生（尤其对可聚焦元素），因此可在 mousedown 阶段设置一个临时标记，并在 focusin 中检查该标记：

function ariaTree(node) {
  const selectable = node.querySelectorAll('.leaf, summary');
  let isMouseDown = false;

  // 在 mousedown 时标记（注意：绑定到 node，而非 individual items）
  node.addEventListener('mousedown', (e) => {
    if (selectable.includes(e.target)) {
      isMouseDown = true;
      // 可选：立即阻止默认聚焦（对某些元素更可靠）
      e.preventDefault();
    }
  });

  // 在 mouseup/click 后清除标记，避免状态残留
  node.addEventListener('mouseup', () => {
    isMouseDown = false;
  });

  // 点击处理：保持原有逻辑
  function clickHandler(e) {
    selectable.forEach(item => item.classList.remove('selected'));
    e.target.classList.add('selected');
  }
  selectable.forEach(item => item.addEventListener('click', clickHandler));

  // 改进后的 focusin：仅在非鼠标触发时执行自动选中
  node.addEventListener('focusin', (e) => {
    // 若当前是鼠标操作引发的 focusin，跳过自动选中
    if (isMouseDown) {
      isMouseDown = false; // 清理标记
      return;
    }

    // 键盘聚焦场景：无任何项被选中时，选中首个
    if (node.querySelectorAll('.selected').length === 0 && selectable.length > 0) {
      selectable[0].classList.add('selected');
      // 可选：显式聚焦首个元素以满足 ARIA 可访问性要求
      selectable[0].focus();
    }
  });
}

ariaTree(document.querySelector('ul[role="tree"]'));

⚠️ 注意事项与最佳实践

不要仅依赖 e.relatedTarget 或 document.activeElement：它们在 focusin 时可能尚未更新，不可靠；
preventDefault() 在 mousedown 中有效但需谨慎：对 <summary></summary> 或自定义 .leaf 元素，若其本身不可聚焦（无 tabindex），preventDefault() 可防止浏览器尝试赋予焦点；若已设 tabindex="0"，则需配合 e.target.focus() 手动控制；
Svelte 中的适配建议：若使用 use:directive，应将 mousedown/focusin 统一封装为一个可复用指令，并在 onDestroy 中清理事件监听器；
可访问性补充：确保 .leaf 和 <summary></summary> 元素具有 tabindex="0" 或语义化角色（如 role="treeitem"），否则键盘导航将失效；
测试验证方式：启用浏览器“光标浏览”（F7），用 Tab 进入树后按方向键导航 —— 应正常聚焦；而鼠标点击任意节点时，不应出现首项高亮闪烁。