本文介绍如何通过阻止事件冒泡来修复动态生成的树形目录结构中因点击子文件夹导致父级误关闭的问题，确保层级折叠行为精准、符合用户预期。
本文介绍如何通过阻止事件冒泡来修复动态生成的树形目录结构中因点击子文件夹导致父级误关闭的问题，确保层级折叠行为精准、符合用户预期。
在构建动态递归目录树时（如用户文件系统浏览界面），常见做法是为每个 <li> 绑定 onclick="toggleFolder(this)" 来切换其子 <ul> 的显隐状态。然而，由于 DOM 事件默认具有冒泡特性，当用户点击一个深层嵌套的 <li>（例如第三级子文件夹）时，该点击事件会逐层向上传播至所有祖先 <li> 元素——导致从当前项到根节点的所有上级 <ul> 被依次触发 toggleFolder，最终表现为“点开子目录却意外收起了父目录”，用户体验严重受损。
根本原因在于：原始代码中 toggleFolder(element) 接收的是 DOM 元素引用，但未区分事件源；而 element.querySelector('ul') 在祖先 <li> 上执行时，可能匹配到更外层的 <ul>（尤其是当结构存在多个嵌套 <ul> 时），进一步加剧逻辑混乱。
✅ 正确解法是使用 event.stopPropagation() 阻断事件冒泡，并严格基于事件目标（event.target）定位对应子列表：
<style>
ul {
list-style: none;
padding-left: 20px;
display: none; /* 默认全部折叠 */
}
li {
cursor: pointer;
padding: 10px;
margin-bottom: 5px;
border: 1px solid #ddd;
border-radius: 5px;
}
/* 可选：为展开状态添加视觉提示 */
li::before {
content: "▶ ";
color: #666;
}
li[aria-expanded="true"]::before {
content: "▼ ";
}
</style>
<script>
function toggleFolder(event) {
event.stopPropagation(); // ✅ 关键：阻止事件向上冒泡
const targetLi = event.target.closest('li'); // 确保获取最内层被点击的 li（兼容文本/图标点击）
const ul = targetLi?.querySelector('ul');
if (ul) {
const isHidden = ul.style.display === 'none';
ul.style.display = isHidden ? 'block' : 'none';
targetLi.setAttribute('aria-expanded', isHidden);
}
}
</script>同时，需更新 PHP 生成逻辑，将 onclick 改为传递 event 对象：
$html .= '<li onclick="toggleFolder(event)">' . htmlspecialchars($item) . '';
⚠️ 注意事项：
- 务必使用 event.target.closest('li') 而非直接 event.target，因为点击可能发生在 <li> 内的文本或空白处，closest() 可稳健定位容器；
- 对 $item 执行 htmlspecialchars() 防止 XSS（原始代码中缺失，属安全关键点）；
- CSS 中 ul { display: none } 确保初始全部收起，符合树形控件常规交互预期；
- aria-expanded 属性增强可访问性，屏幕阅读器可据此播报展开状态。
通过上述改造，每次点击仅影响直接所属的子列表，父子层级完全解耦，实现真正可靠的递归折叠体验——无论点击第几级目录，都不会干扰其他层级状态。
