应使用事件委托监听父容器，通过e.target.closest('li')获取点击项并读取data-depth属性，再逐级向上遍历祖先li节点构建分支路径，从而高效定位整条分支及其深度序列。
在文件目录树中，点击折叠符号（如 ▶ 或 ▼）时，用事件委托高效定位整条分支并读取其 depth 属性，关键在于：**不给每个折叠图标单独绑定事件，而是监听父容器，通过事件冒泡 + 节点路径分析来确定被点击项的层级与所属分支**。
1. 结构需支持深度标识
确保 DOM 树节点自带可读取的层级信息，推荐以下任一方式：
- 使用
data-depth属性显式标记每级节点深度，例如：<li data-depth="2"> <span class="toggle">▶</span>src/</li> - 利用 DOM 嵌套层级推算深度（需统一结构，如所有文件夹都用
<ul><li></ul>嵌套），但不如 data 属性稳定可靠 - 避免依赖 CSS 类名或文本内容判断层级，易出错且难维护
2. 用事件委托监听折叠图标点击
在目录容器（如 #file-tree）上绑定一次 click 事件，检查 event.target 是否为折叠元素：
document.getElementById('file-tree').addEventListener('click', function (e) {
if (e.target.classList.contains('toggle')) {
const item = e.target.closest('li'); // 找到当前折叠项对应的 li 节点
if (item) {
const depth = parseInt(item.dataset.depth, 10) || 0;
console.log('点击项深度:', depth);
// 后续操作：展开/折叠、读取子分支等
}
}
});
3. 获取整条分支（从根到当前节点）
要拿到“整条分支”，即从根节点一路向下到当前 li 的所有祖先 li 节点（含自身），可用 closest 和循环向上遍历：
- 从
item开始，用item.parentElement.closest('li')逐级向上找父级文件夹节点 - 收集所有命中节点，顺序为：根 → 子 → 孙 → … → 当前项
- 每个节点都可读取
dataset.depth，自然得到整条路径的深度序列
示例代码片段：
function getBranchPath(node) {
const path = [];
let current = node;
while (current && current !== this) { // this 是 tree 容器，防越界
if (current.tagName === 'LI') {
path.unshift(current); // 头部插入，保证根在前
}
current = current.parentElement;
}
return path;
}
// 在 click 回调中调用：
const branch = getBranchPath(item);
const depths = branch.map(el => parseInt(el.dataset.depth, 10));
console.log('整条分支深度:', depths); // 如 [0, 1, 2]
4. 注意折叠状态与子节点联动
仅读取深度还不够，实际折叠/展开需操作对应子 ul。建议：
- 每个
li下紧跟一个<ul class="children"></ul>，便于用item.querySelector('.children')快速定位 - 切换时更新
toggle文本（▶ ↔ ▼）或添加expanded类，方便样式控制 - 深度属性本身不控制显示，只用于逻辑判断（如限制最大展开深度、权限校验等）
不复杂但容易忽略：确保所有 li 节点都有 data-depth，且值为数字；事件委托必须挂载在静态存在的父容器上，不能是动态生成后才添加的节点。
