高效批量操作甘特图应采用事件委托+坐标映射：监听容器点击，通过data属性或clientx/y计算行列索引，结合数据id与时间点映射逻辑坐标，支持整行/列选中及与原生库事件协同。
在分布式甘特图中做批量操作时，靠给每个任务单元单独绑定事件不仅性能差，还容易因动态增删导致监听丢失。真正高效的做法是利用事件委托 + 坐标映射，把点击、拖拽等行为统一收口到容器层，再根据 DOM 结构或数据上下文反推行列索引。
用事件委托捕获目标单元格位置
甘特图时间槽通常用 CSS Grid 或表格结构渲染，每行代表一个任务，每列代表一个时间单位（如天、小时）。不要给每个 <div class="task-bar"> 单独加 click，而是监听整个甘特区域的 <code>click 事件：
- 给外层容器（如
id="gantt-grid"）设置addEventListener('click', handleCellClick) - 在
handleCellClick中用event.target向上查找最近的单元格元素（例如带data-row和data-col属性的<div>） <li>若目标不是单元格，则通过 <code>event.clientX / clientY配合getBoundingClientRect()计算落在哪一行哪一列（适用于无明确单元格标记的 Canvas 或绝对定位场景） -
基于真实数据索引绑定：渲染时让每个单元格的
data-task-id和data-date（ISO 格式）对应后端任务 ID 和时间点，点击后直接查表映射到逻辑行列号 -
用 CSS Grid 的
grid-row/grid-column自动提取：若使用display: grid，可通过getComputedStyle(el).gridRowStart和gridColumnStart获取原始定义值（注意 IE 不支持，需降级处理） - 点击某单元格得到
{rowIndex: 5, colIndex: 12}后，整行选中即取该rowIndex下全部有效colIndex（过滤掉空闲时段） - 整列选中则固定
colIndex，遍历所有rowIndex并校验该行列是否存在实际任务（避免选中空白行） - 用 Set 存储选中坐标对，避免重复；更新视图时只刷新变化部分，不重绘全图
- 从事件参数拿到
task.id和date（如"2026-05-19"） - 查本地缓存的任务列表，获取该任务在原始数组中的
index（即行号） - 查时间轴配置，将日期转为列序号：
timeScale.indexOf(date)（需保证时间轴已预生成索引映射）
确保行列索引可被程序识别
静态写死的 data-row="3" data-col="7" 不够灵活，尤其在滚动、缩放、分页加载时易错位。推荐两种可靠方式：
批量选中整行或整列的坐标计算逻辑
用户按住 Ctrl 或 Shift 点击时，常需扩展选区为整行（所有时间列）或整列（所有任务行）。关键不是 DOM 遍历，而是复用已有坐标体系：
配合甘特图库的原生事件做增强
像 gantt-elastic 或 dhtmlxGantt 已内置 onEmptyClick、onTaskClick 等事件，它们返回的是任务对象和时间点，不是像素坐标。此时可反向查表：
