javascript - 未在 touchend 上删除 ChartJS 垂直线

我正在使用这个插件来绘制一条垂直线，用户可以在其中触摸/悬停在图表上:

Chart.plugins.register({
   afterDatasetsDraw: function(chart) {
      if (chart.tooltip._active && chart.tooltip._active.length) {
         var activePoint = chart.tooltip._active[0],
            ctx = chart.ctx,
            y_axis = chart.scales['y-axis-0'],
            x = activePoint.tooltipPosition().x,
            topY = y_axis.top,
            bottomY = y_axis.bottom;
         ctx.save();
         ctx.beginPath();
         ctx.moveTo(x, topY);
         ctx.lineTo(x, bottomY);
         ctx.lineWidth = 1;
         ctx.strokeStyle = '#26D4A5';
         ctx.stroke();
         ctx.restore();
      }
   }
});

悬停结束后该行将被删除，但是如果发生 touchend/touchcancel，该行仍然存在。

我尝试将 afterEvent 添加到插件中，如下所示:

Chart.plugins.register({
   afterDatasetsDraw: function(chart) {
      if (chart.tooltip._active && chart.tooltip._active.length) {
         var activePoint = chart.tooltip._active[0],
            ctx = chart.ctx,
            y_axis = chart.scales['y-axis-0'],
            x = activePoint.tooltipPosition().x,
            topY = y_axis.top,
            bottomY = y_axis.bottom;
         ctx.save();
         ctx.beginPath();
         ctx.moveTo(x, topY);
         ctx.lineTo(x, bottomY);
         ctx.lineWidth = 1;
         ctx.strokeStyle = '#26D4A5';
         ctx.stroke();
         ctx.restore();
      }
   },
   afterEvent: function(chart, e) {
     if(e.type=="mouseout"){
       alert("mouseout");
     }
     if(e.type=="touchend"){
       alert("touchend");
     }
     if(e.type=="mousemove"){
       alert("mouse move");
     }
   }
});

但对触摸起作用的唯一事件是 mousemove、touchend 和 mouseout 在移动/触摸上不起作用。有什么解决方法吗？

最佳答案

似乎问题在于“touchend”事件已从默认配置中删除。

将事件“touchend”重新添加到这样的选项中，在touchend之后删除工具提示。

events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]

此处已更改:https://github.com/chartjs/Chart.js/pull/1644/files

关于javascript - 未在 touchend 上删除 ChartJS 垂直线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47305643/