javascript – touchmove事件没有在谷歌Chrome上为Android启动

这是一个反应“客户签名”组件. Android Chrome浏览器上没有触发touchmove事件.我在三星Galax平板电脑上(2016年).我将平板电脑通过USB连接到我的电脑控制台.

在我的componentDidMount中,我获得了画布引用,2d上下文等,并为canvas元素设置了事件监听器：

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

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

事件永远不会发生.我在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等触摸移动问题,但这些问题似乎都没有解决我遇到的同样问题.

谢谢你的帮助

解决方法:

我遇到过同样的问题.最终工作的是当手指触摸画布时禁用任何滚动.

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);

标签：touchmove,javascript,events,reactjs,canvas
来源： https://codeday.me/bug/20190910/1799725.html