javascript - touchmove 事件未在 Android 版谷歌浏览器上触发

Question

这是一个 react “客户签名”组件。 touchmove 事件未在适用于 Android 的 Google Chrome 浏览器上触发。我使用的是 Samsung Galax Tablet a (2016)。我已将平板电脑通过控制台 USB 连接到我的 PC。

在我的 componentDidMount 中，我获取 Canvas 引用、2d 上下文等，并为 Canvas 元素设置事件监听器:

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

在我的渲染中我有 Canvas : 使成为(){

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

我还有其他有效的事件，所以我认为它与 Canvas 引用没有任何关系。

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 等的触摸移动问题，但这些问题似乎都没有解决我遇到的相同问题。

谢谢你的帮助

Answer 1

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

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

快速谷歌后我发现: 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 将 style="touch-action:none;" 添加到 Canvas 以停止浏览器滚动到您要签名/绘图的位置