Plotly 在触摸设备上启用 dragmode: 'select' 时，单击（tap）无法触发 plotly_click 且 plotly_selected 缺失坐标数据；本文提供基于 Hammer.js 的可靠解决方案，通过监听 tap 事件并结合 Plotly 坐标系映射，精准还原点击位置。
plotly 在触摸设备上启用 `dragmode: 'select'` 时，单击（tap）无法触发 `plotly_click` 且 `plotly_selected` 缺失坐标数据；本文提供基于 hammer.js 的可靠解决方案，通过监听 `tap` 事件并结合 plotly 坐标系映射，精准还原点击位置。
在 Plotly 中，dragmode: 'select' 模式默认优先响应区域选择（如框选），导致触摸设备上的单点“点击”被误判为极短拖拽，从而仅触发空载的 plotly_selected 事件，而 plotly_click 完全不触发——这是 Plotly.js 当前对触摸事件支持的固有限制（截至 v2.25），并非配置错误。
要真正捕获触摸单击的有效坐标，需绕过 Plotly 原生事件机制，引入专业触摸手势库 Hammer.js，监听 tap 事件，并手动将屏幕坐标转换为 Plotly 数据坐标。以下是完整实现方案：
✅ 步骤一：引入依赖
<script src="https://cdn.plot.ly/plotly-2.25.0.min.js"></script><script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
✅ 步骤二：初始化图表并绑定原生事件（保留兼容性）
const z = Array.from({length: 50}, () =>
Array.from({length: 50}, () => Math.floor(Math.random() * 255))
);
const data = [{type: 'heatmap', z}];
const layout = {yaxis: {scaleanchor: 'x'}, dragmode: 'select'};
const config = {modeBarButtons: [['select2d']]};
Plotly.newPlot('plot', data, layout, config);
// 仍保留原生事件监听（用于桌面端及部分场景）
document.getElementById('plot').on('plotly_click', e => {
console.log('Desktop click:', e.points[0]);
});
✅ 步骤三：用 Hammer.js 捕获触摸点击并转换坐标
const plotEl = document.getElementById('plot');
const hammer = new Hammer(plotEl);
hammer.on('tap', ev => {
// 获取点击相对于绘图容器的 clientX/clientY
const rect = plotEl.getBoundingClientRect();
const x = ev.center.x - rect.left;
const y = ev.center.y - rect.top;
// 调用 Plotly 的 convert API 将像素坐标转为数据坐标（需 Plotly ≥ 2.14）
const gd = plotEl._fullLayout && plotEl._fullData ? plotEl : null;
if (gd && Plotly.Fx && Plotly.Fx.hover) {
// 方案1：模拟 hover 获取最近点（推荐，兼容性强）
const hoverEvent = {
x: x,
y: y,
xaxis: gd._fullLayout.xaxis,
yaxis: gd._fullLayout.yaxis,
curveNumber: 0,
pointNumber: 0
};
const points = Plotly.Fx.hover(gd, hoverEvent);
if (points && points.length > 0) {
console.log('Touch tap (hover-based):', points[0]);
return;
}
}
// 方案2：手动计算（适用于 heatmap 等规则布局）
const xaxis = plotEl._fullLayout.xaxis;
const yaxis = plotEl._fullLayout.yaxis;
const xVal = xaxis.p2d(x); // 像素→数据值
const yVal = yaxis.p2d(y);
console.log('Touch tap (manual conversion):', {x: xVal, y: yVal});
});
⚠️ 注意事项
- 必须使用 tap 而非 click：移动端 click 有 ~300ms 延迟且不可靠；tap 是 Hammer.js 专为触摸优化的即时手势。
- 坐标转换依赖 _fullLayout：确保 Plotly 图表已完全渲染（可监听 plotly_afterplot 事件再初始化 Hammer）。
- heatmap 特殊处理：热力图坐标为整数索引，建议用 Math.round(xVal) 和 Math.round(yVal) 获取格点坐标。
- 避免重复触发：Hammer 的 tap 与 Plotly plotly_click 不冲突，但若需统一逻辑，建议禁用 plotly_click 并全程使用 tap 处理。
通过该方案，你不仅能稳定获取触摸单击的精确数据坐标，还能保持桌面端 plotly_click 的原有行为，实现真正的跨平台交互一致性。
