本文详解如何通过阻止事件冒泡解决动态生成的多层文件夹列表中点击子项意外触发父级折叠的问题，核心在于为 toggleFolder 函数添加 event.stopPropagation() 并正确绑定事件目标。
本文详解如何通过阻止事件冒泡解决动态生成的多层文件夹列表中点击子项意外触发父级折叠的问题，核心在于为 `togglefolder` 函数添加 `event.stoppropagation()` 并正确绑定事件目标。
在构建动态层级文件夹结构时，常见的交互需求是：点击某一级文件夹（<li>）仅展开/收起其直接子目录（即紧邻的 <ul>），而不影响其祖先或兄弟节点。然而，当前代码存在典型的事件冒泡问题——当用户点击深层嵌套的 <li> 时，click 事件会逐层向上传播至所有父级 <li> 元素，导致多个层级同时切换显示状态，造成“误折叠”现象。
根本原因在于：原始 HTML 中所有 <li> 均绑定相同 onclick="toggleFolder(this)"，而 this 指向的是当前被点击的 <li>；但 JavaScript 中未阻止事件向上冒泡，因此点击子 <li> 后，其父 <li>、祖父 <li> 等也会依次触发 toggleFolder，引发连锁折叠。
✅ 正确解法是 显式阻止事件冒泡，并精准定位目标 <ul>：
-
修改 PHP 生成逻辑：将 onclick 参数从 this 改为 event，以便在 JS 中访问原生事件对象：
$html .= '<li onclick="toggleFolder(event)">' . htmlspecialchars($item) . '';
⚠️ 注意：为安全起见，建议对 $item 使用 htmlspecialchars() 防止 XSS。
-
更新 JavaScript 函数：接收 event 参数，调用 stopPropagation()，并通过 event.target 查找当前 <li> 下的 <ul>：
function toggleFolder(event) { event.stopPropagation(); // 关键：阻止事件冒泡到父级 li const ul = event.target.querySelector('ul'); if (ul) { ul.style.display = ul.style.display === 'none' ? 'block' : 'none'; } } -
补充 CSS 健壮性（推荐）：避免依赖内联 style，改用 CSS 类控制显隐，提升可维护性：
ul.collapsed { display: none; } ul.expanded { display: block; }对应 JS 可改为：
function toggleFolder(event) { event.stopPropagation(); const ul = event.target.querySelector('ul'); if (ul) { ul.classList.toggle('collapsed'); ul.classList.toggle('expanded'); } }
? 关键注意事项：
- event.target 始终指向实际被点击的 DOM 元素（如 <li>），而 event.currentTarget 指向绑定事件的元素（此处也是 <li>），二者在此场景下等效；
- 切勿使用 event.target.parentNode.querySelector('ul')，因 event.target 可能是 <li> 的文本节点（若无包裹标签），应确保 HTML 结构纯净；
- 动态生成内容需注意：scandir() 返回结果无序，建议 sort() 后处理以保证稳定展示；
- 生产环境应增加加载状态提示与错误边界处理（如权限拒绝、路径不存在等）。
通过以上调整，即可实现真正“按需折叠”的树形导航体验：点击任意层级文件夹，仅该层级子目录响应，父级与兄弟节点状态保持不变，符合用户直觉与专业交互规范。
