多层穿梭框使用事件委托管理选中状态，即为源/目标容器绑定click事件，通过event.target.closest()识别选项元素并读取data-key，动态更新sourceSelectedKeys/targetSelectedKeys数组及按钮可用性，同时阻止嵌套操作按钮的事件冒泡。
在多层穿梭框（Transfer）组件中使用事件委托管理选中状态，核心是利用 event.target 精准识别被点击的选项元素，并结合其数据属性（如 data-key 或 data-value）动态更新源列表和目标列表的选中状态，避免为每个选项单独绑定事件。
1. 结构设计：为左右面板分别设置代理容器
Transfer 通常包含「源列表」和「目标列表」两个可滚动区域。不要给每个 <li> 或 <div class="transfer-item"> 单独加 click 事件，而是为左右两个列表容器（如 .transfer-source 和 .transfer-target）各绑定一个事件监听器：
- 确保每个选项元素有唯一标识，例如：
<div class="item" data-key="user-123">张三</div> - 选项的选中状态不依赖
class="selected"这类视觉类名，而由内部数据结构（如数组sourceSelectedKeys/targetSelectedKeys）驱动渲染 - 容器需有明确的
id或class，便于addEventListener绑定
2. 事件捕获与目标识别：用 closest() 定位选项
点击可能发生在选项内的任意位置（文字、图标、复选框等）。用 event.target.closest('.transfer-item') 向上查找最近的选项容器，再读取其 dataset.key：
sourceContainer.addEventListener('click', (e) => {
const item = e.target.closest('.transfer-item');
if (!item) return;
const key = item.dataset.key;
// 切换 sourceSelectedKeys 中 key 的存在状态
toggleInArray(sourceSelectedKeys, key);
renderSourceList(); // 重新渲染源列表（高亮/取消高亮）
});
同理处理目标容器。这样无论用户点文字、点空白项区域，甚至点自定义复选框图标，都能统一响应。
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记（深入）”；
3. 多层联动：同步更新跨面板状态与按钮可用性
Transfer 常含「移入」「移出」「全移入」「全移出」等操作按钮。这些按钮是否禁用，取决于当前选中项是否存在于对应源/目标中。事件委托更新完选中数组后，立即检查并更新按钮状态：
moveToTargetBtn.disabled = sourceSelectedKeys.length === 0;moveToSourceBtn.disabled = targetSelectedKeys.length === 0;- 若支持「按住 Ctrl/Shift 多选」，需在事件处理中判断修饰键：
e.ctrlKey || e.shiftKey，并实现区间选中逻辑
4. 注意事项：避免事件冒泡干扰与重复绑定
如果 Transfer 内部还嵌套了操作按钮（如删除、编辑图标），它们的点击不应触发选项选中。可在这些子元素上加 event.stopPropagation()：
item.querySelector('.item-delete-btn').addEventListener('click', (e) => {
e.stopPropagation();
deleteItem(item.dataset.key);
});
另外，确保组件销毁或重渲染时移除旧监听器，防止内存泄漏或重复绑定：
- 用
element.removeEventListener配合命名函数，或使用{ once: true }（适合一次性操作） - React/Vue 等框架中，在
useEffect或mounted中绑定，在cleanup或beforeUnmount中解绑
