事件冒泡应被合理利用而非一概阻止，通过事件委托在父容器统一监听，结合event.target精准识别点击目标、stopPropagation按需阻止干扰冒泡，并区分默认行为与冒泡机制。

处理文件列表项操作时，事件冒泡本身不是问题，而是要合理利用它来简化事件绑定，同时避免误触发——关键在于正确使用 event.target 和 event.stopPropagation()，而不是一概阻止冒泡。

用事件委托统一监听列表容器

不要给每个文件项（如 <li class="file-item">）单独绑点击事件。在父容器（如 <ul id="file-list"></ul>）上监听一次 click，通过判断 event.target 是否为有效文件项来响应：

• 减少内存占用和 DOM 操作，尤其适合动态增删文件项的场景
• 新添加的文件项无需重新绑定事件，天然支持
• 示例代码：
  

  document.getElementById('file-list').addEventListener('click', (e) => {
    const item = e.target.closest('.file-item');
    if (!item) return;
    const fileName = item.dataset.name;
    console.log('操作文件：', fileName);
  });

区分点击目标：图标、复选框、空白区域

一个文件项内常有多个可交互元素（如删除图标、复选框、重命名区域）。冒泡允许你在父项上统一处理，但需精准识别实际点击位置：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

• 用 e.target.classList.contains('delete-btn') 判断是否点中删除按钮
• 用 e.target.type === 'checkbox' 区分是否点中选择框
• 用 e.target === e.currentTarget 或 e.target.matches('.file-item > *') 排除子元素后，才视为“点击文件项主体”

谨慎使用 stopPropagation，优先用语义化判断

只有当父级或祖先元素有同类型事件且会干扰当前逻辑时（比如列表外层有个模态框点击关闭），才考虑阻止冒泡：

立即学习“Java免费学习笔记（深入）”；

• 删除按钮点击后调用 e.stopPropagation()，防止触发外层列表的“选中文件”逻辑
• 避免在文件项 click 处理器开头就写 e.stopPropagation() —— 这会切断所有向上冒泡，包括你后续可能需要的全局快捷键或日志统计
• 更推荐的做法：用条件提前 return，而非无差别阻止

注意默认行为与冒泡的关系

像 <a href="#"></a> 或带 type="submit" 的按钮，点击后不仅冒泡，还会触发默认跳转或提交。此时应：

• 对链接调用 e.preventDefault() 阻止跳转，再处理业务逻辑
• 对表单按钮，在委托处理器中先 e.preventDefault()，再根据 e.target 类型决定是上传、重命名还是其他操作
• 默认行为和事件冒泡是两个独立机制，别混淆：阻止默认不等于阻止冒泡，反之亦然