在实现 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 进入树后按方向键导航 —— 应正常聚焦；而鼠标点击任意节点时，不应出现首项高亮闪烁。
通过引入 isMouseDown 上下文标志，我们精准拦截了由鼠标交互引发的伪焦点事件，既符合 ARIA Treeview 规范 对键盘焦点管理的要求，又保障了鼠标用户的流畅体验。
