虚拟滚动列表应使用事件委托，将click监听器绑定在外层容器上，通过data-index属性和event.target.closest反查索引，每次渲染须显式更新data-index以防复用脏状态，并补充键盘导航与无障碍支持。
虚拟滚动列表里，DOM 元素是动态复用的，真实渲染的节点很少，直接给每个列表项绑定 click 事件不现实，也容易漏绑或重复绑定。事件委托是标准解法——把监听器挂在滚动容器上，靠 event.target 和数据映射关系识别点击的是哪一项。
监听容器，不监听子项
不要在每次渲染时给 <li> 或 cell 元素加 onclick，而是把事件监听器统一加在虚拟滚动的外层容器（比如 div.list-container）上：
- 确保容器有明确的 CSS 高度和
overflow: auto，且子项通过定位（如position: absolute）布局 - 监听
click事件，避免用mousedown或touchstart，除非需要兼容长按等交互 - 注意：容器不能设
pointer-events: none，子元素也不能意外阻止冒泡（比如event.stopPropagation()）
从 event.target 反查数据索引
点击发生时，event.target 是实际被点中的 DOM 节点（可能是 cell、文字、图标等）。你需要根据它反推出对应的数据索引：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 推荐在渲染每个 cell 时，用
data-index属性标记其逻辑位置：<div class="cell" data-index="123">... <li>在事件处理器中向上查找最近的带 <code>data-index的父元素：const cell = e.target.closest('[data-index]'); - 拿到
cell?.dataset.index后转为数字，再从原始数据数组（如items）中取对应项：const item = items[+index]; - 渲染循环中，对每个复用的 cell 元素，强制设置
el.dataset.index = String(realIndex); - 如果 cell 内部有按钮、开关等独立交互控件，它们的
data-index也要同步更新，或统一由 cell 级别处理 - 避免依赖
innerText、textContent或样式类名反推索引，这些不可靠且易受内容变化影响 - 给每个可交互 cell 加
role="button"和tabindex="0" - 监听
keydown事件，对Enter和Space做等效处理 - 保持
aria-label或aria-labelledby准确反映当前项语义，例如：aria-label="打开用户 张三 的详情"
处理复用单元格的“脏状态”
虚拟滚动会复用 DOM 节点，如果前一次渲染给某个 cell 设置了 data-index="5"，下一次渲染没显式更新，它可能还留着旧值——导致点错项。必须确保每次渲染都显式重写关键属性：
补充：支持键盘与辅助技术
纯鼠标点击委托不够健壮。若列表需支持键盘导航（如 Tab + Enter）或屏幕阅读器，建议：
