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

这是针对“客户签名”组件的反应。 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); });
}

在我的渲染中我有画布： 使成为（）{ }

该事件永远不会触发。我已在 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 问题等内容，但这些问题似乎都没有解决我遇到的相同问题。

感谢您的帮助

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

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

快速谷歌后我发现：TouchMove 事件在 chrome 72 和最新的 webkit 中停止工作 https://stackoverflow.com/questions/54493182/touchmove-events-stopped-working-in-chrome-72-and-latest-webkit解决方法是添加边框，这对我来说不起作用，并且支持我的经验，该问题取决于页面的呈现方式。

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 add style="touch-action:none;"到画布以停止浏览器滚动到您想要签名/绘图的位置