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

2019-09-10 15:45:22 阅读：229 来源： 互联网

标签：touchmove javascript events reactjs canvas

这是一个反应“客户签名”组件. 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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