使用Plotly、触摸设备在选择模式下获取单击事件

Question

使用以下 Plotly.js 代码，当我们选择矩形区域（拖放）时，我会收到事件数据，并且当我们单击单个点时，也会收到事件数据：触发 plotly_selected 和

plotly_click

事件。这有效。当我们对触摸设备执行相同操作时（可以使用开发者工具

F12

和“切换设备工具栏”CTRL+SHIFT+M在Chrome中进行模拟）：

选择起作用并触发

plotly_selected
• 事件单击不起作用：
plotly_selected
• 事件被触发

  但没有坐标数据

  ，并且没有plotly_click被触发

问题：如何使用触摸设备在

select模式下单击获得坐标？

我尝试过

clickmode: "select"

或

"event"

或

"event+select"

但问题是一样的。

现场演示

奇怪的是，以下代码在从 SO 片段运行时会挂起浏览器，但它可以从 HTML 文件运行，因此是实时演示链接。

const z = Array.from({length: 50}, () => Array.from({length: 50}, () => Math.floor(Math.random() * 255)));
const data = [{type: 'heatmap', z: z}];
const layout = {'yaxis': {'scaleanchor': 'x'}, 'dragmode': 'select'}
const config = { modeBarButtons: [["select2d"]] };
Plotly.newPlot('plot', data, layout, config);
document.querySelector("#plot").on("plotly_click", (e) => { 
    console.log("plotly_click", e); 
});
document.querySelector("#plot").on("plotly_selected", (e) => { 
    console.log("plotly_selected", e); 
});

<script src="https://cdn.plot.ly/plotly-2.25.0.min.js"></script>
<div id="plot"></div>

Answer 1

hammer.js

下面的代码片段将帮助您处理触摸设备上的点击（点击）。还有

JSFiddle 现场演示

const z = Array.from({length: 50}, () => Array.from({length: 50}, () => Math.floor(Math.random() * 255)));
const data = [{type: 'heatmap', z: z}];
const layout = {'yaxis': {'scaleanchor': 'x'}, 'dragmode': 'select'}
const config = { modeBarButtons: [["select2d"]] };
Plotly.newPlot('plot', data, layout, config);
var plot = document.getElementById('plot');
plot.on("plotly_click", (e) => { 
    console.log("plotly_click", e); 
});
plot.on("plotly_selected", (e) => { 
    console.log("plotly_selected", e); 
});
//Add support to handle touch screen events on plot
var plotTouch = new Hammer(plot);
plotTouch.on('tap', function(e) {
    console.log("plotly_tap",e);
});

<script src="https://cdn.plot.ly/plotly-2.25.0.min.js"></script>
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<div id="plot"></div>