touchmove 事件不会在 Android 版谷歌浏览器上触发

Question

这是针对“客户签名”组件的反应。touchmove 事件不会在 Android 版 Google Chrome 浏览器上触发。我使用的是三星 Galax 平板电脑 a (2016)。我通过 USB 控制台将平板电脑连接到我的电脑。

在我的 componentDidMount 中，我获取画布引用、2d 上下文等，并为画布元素设置事件侦听器：

componentDidMount(){
   let canvas = this.refs.canvas;
   let ctx = canvas.getContext("2d");
   // ...
   canvas.addEventListener('touchmove ', (e) => { console.log("touchMove: ", e); });
}

在我的渲染中，我有画布： render(){ }

该事件永远不会触发。我已在 touchstart 上设置了 e.preventDefault；触摸画布区域内部时页面不会滚动。触摸画布内部并移动手指不会执行任何操作。

我还有其他有效的事件，所以我认为这与画布参考没有任何关系。

document.addEventListener('keydown', this.keyPress);
canvas.addEventListener('mousemove', this.mouseMove); // works
canvas.addEventListener('touchmove ', (e) => { console.log("touchMove E: ", e); }); // does not work
canvas.addEventListener("mousedown", this.mouseDown); // works
canvas.addEventListener("mouseup", this.mouseUp); // works
canvas.addEventListener("touchstart", this.touchStart); // works
canvas.addEventListener("touchend", this.touchEnd); // works

系统详情

Chrome 66.0.3359.158
Android 5.1.1;SM-T280 Build/LMY47V

如果您需要其他信息，请告诉我。

我的 mouseMove 运行良好，所以这个签名模块在 PC 上运行得很好。现在我只是想在移动/触摸屏上实现这项工作。

PS我已经阅读并阅读了有关android上的touchmove问题等，但这些问题似乎都没有解决我遇到的相同问题。

感谢您的帮助

Answer 1

我遇到过同样的问题。最终起作用的是，如果手指触摸画布，则禁用任何滚动。

document.body.addEventListener("touchstart", function(e){ if (e.target.nodeName == 'CANVAS') { e.preventDefault(); } }, false);
document.body.addEventListener("touchend", function(e){ if (e.target.nodeName == 'CANVAS') { e.preventDefault(); } }, false);
document.body.addEventListener("touchmove", function(e){ if (e.target.nodeName == 'CANVAS') { e.preventDefault(); } }, false);