利用事件冒泡实现“点击高亮”是指监听父容器点击事件，通过event.target.closest()识别被点击子元素，动态添加/移除active类。该方案高效、支持动态元素，兼容单选、多选及空白处取消高亮。
在 JavaScript 中，利用事件冒泡实现“点击高亮”通常是指：**不给每个可点击元素单独绑定事件，而是监听父容器的点击事件，通过事件对象的 target 找到真正被点击的子元素，并动态添加/切换高亮样式（如 active 类）**。这种方式高效、易维护，尤其适合动态增删元素的场景。
1. 基础结构与样式准备
先确保 HTML 结构有统一父容器，子元素具备可识别特征（如相同 class 或 data 属性），并定义好高亮样式：
<div id="list">
<button class="item">选项一</button>
<button class="item">选项二</button>
<button class="item">选项三</button>
</div>
<style>
.item { padding: 8px 12px; margin: 4px; border: 1px solid #ccc; }
.item.active { background: #007bff; color: white; border-color: #007bff; }
</style>
2. 利用冒泡绑定一次事件监听
在父容器（如 #list）上监听 click，利用事件冒泡捕获所有子元素的点击，再判断是否为有效目标：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 检查
event.target是否匹配目标元素（如button.item） - 移除之前所有
.active类，再给当前点击元素添加 - 使用
closest()可兼容点击子内容（如按钮内的图标或文字）
const list = document.getElementById('list');
list.addEventListener('click', function (e) {
// 向上查找最近的 .item 元素（支持点击内部文本/标签）
const item = e.target.closest('.item');
if (!item) return;
// 移除所有 active 状态
document.querySelectorAll('.item').forEach(el => el.classList.remove('active'));
// 给当前项添加 active
item.classList.add('active');
});
3. 支持单选/多选与取消高亮
根据需求调整逻辑：
立即学习“Java免费学习笔记（深入）”；
- 单选（默认）：如上例，每次只高亮一个
-
多选：点击时用
toggle替代add/remove，不清理其他项 -
点击空白处取消高亮：在
e.target === list时清空所有active
4. 注意事项
- 确保父容器能正确包裹子元素（避免因 CSS
display: contents等破坏冒泡路径） - 若子元素是动态添加的，冒泡方案天然支持，无需重新绑定
- 避免在子元素上写
onclick内联事件或调用e.stopPropagation()，否则会中断冒泡
