Javascript google chrome for android上未触发touchmove事件

这是针对react“客户签名”组件的。touchmove事件不会在Android版谷歌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问题的书，但是这些问题似乎都没有解决我现在遇到的问题

---

谢谢你的帮助

我也有同样的问题。最终起作用的是，如果手指接触画布，则禁用任何滚动

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

---

我也有同样的问题，只在一台设备上（Android 7.1.1和Chrome 75.0.3770）。 该页面是一份工作报告，底部有签名区

这个问题很难复制，因为根据布局，它并不总是表现出来（这让我疯狂地拆开页面的html，认为我在某个地方有一个未关闭的标记，相反，根据布局，它只是有点随机。），如果我在页面完全加载之前滚动到底部（缓存已禁用）触发了touchmove事件

在快速搜索之后，我发现： 解决方法是添加边框，但这对我不起作用，并且支持我的经验，即问题取决于页面的呈现方式

上面来自Baked Inhalf的修复确实有效，但是如果要阻止事件，则必须添加

{passive:false}

。奇怪的是，这并不是必须的，只是将事件侦听器添加到主体中就可以解决问题

以下是我的解决方案：

function fixTouchMove( event )
{
    return;
}

// Remove any previous listners as the page content is ajax loaded and body is never destroyed
document.body.removeEventListener( "touchstart", fixTouchMove );
// Event listner that doesn't do anything, but fixes missing eventmove
document.body.addEventListener( "touchstart", fixTouchMove );

p、 s将

style=“touch action:none；”“

添加到画布中，以停止浏览器滚动到要签名/绘制的位置