Chart.js 中快速移出图表区域时交叉线残留，本质是 mousemove 事件漏触发导致边界判断失效；正确解法是补充 mouseleave 事件监听，强制清除交叉线，确保响应即时、无遗漏。
chart.js 中快速移出图表区域时交叉线残留，本质是 `mousemove` 事件漏触发导致边界判断失效；正确解法是补充 `mouseleave` 事件监听，强制清除交叉线，确保响应即时、无遗漏。
在 Chart.js 中实现自定义交叉线（crosshair）效果时，一个常见但易被忽视的问题是：当鼠标快速移出图表容器边界时，交叉线未能及时消失，而是“卡”在边缘位置。这并非 Chart.js 的 Bug，而是由浏览器事件机制与绘图逻辑耦合不当所致。
根本原因在于当前实现完全依赖 mousemove 事件进行双重操作：先调用 chart.update('none') 清除上一帧，再根据鼠标坐标判断是否重绘交叉线。而 mousemove 仅在元素内部持续触发——一旦鼠标以高速越过容器边界，最后捕获的 mousemove 坐标往往仍处于 chartArea 内部（如紧贴右/下边缘），导致 if (x >= left && x = top && y 条件始终为 <code>true，交叉线无法被清除。
✅ 正确解法：分离「清除」与「绘制」职责
-
mousemove：专注坐标获取与条件绘制（保留原逻辑）； -
新增
mouseleave：专责无条件清除交叉线，无需坐标判断，彻底规避边界漏检。
以下是关键修复代码（已整合进完整流程）：
// ✅ 添加 mouseleave 监听器：鼠标离开容器时立即清除交叉线
container.addEventListener('mouseleave', () => {
cjs_plot.update('none'); // 强制重绘基础图表，不绘制任何交叉线
});同时，建议对 crosshair() 函数做两处增强，提升鲁棒性：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
-
使用
getBoundingClientRect()替代offsetX/Y（更可靠，避免嵌套定位干扰）：const rect = container.getBoundingClientRect(); const x = mousemove.clientX - rect.left; const y = mousemove.clientY - rect.top;
-
显式重置 canvas 状态（防止样式残留）：
ctx.restore(); // 已有 ctx.setTransform(1, 0, 0, 1, 0, 0); // 新增：重置变换矩阵，避免累积缩放/旋转影响
⚠️ 注意事项：
- 不要将事件监听器绑定到
<canvas></canvas>元素本身（#myChart），而应绑定到外层容器（#chart_container），否则mouseleave在 canvas 子元素（如图例、标题）上触发时会误判； - 若容器存在 padding 或 border，请在计算
rect后手动减去对应偏移，或直接用container.clientWidth/clientHeight配合offsetLeft/Top； -
update('none')是 Chart.js 4+ 的高效更新模式，它跳过动画和过渡，仅执行重绘，非常适合高频交互场景。
总结：交叉线“粘滞”问题本质是事件驱动绘图模型的边界盲区。通过 mouseleave 补充兜底清除，配合坐标获取方式优化，即可实现毫秒级响应、零残留的工业级交叉线体验——无需复杂节流、防抖或自定义 hit-testing，简洁、高效、可维护。
