Question

这是一个反应＆＃34;客户签名＆＃34;零件。 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等触摸移动问题，但这些问题似乎都没有解决我遇到的同样问题。

感谢您的帮助

Answer 1

我有同样的问题。最终可行的方法是，如果手指触摸画布，则禁用任何滚动。

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

Answer 2

我在一个设备（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;"添加到画布以停止浏览器滚动到您想要签名/绘制的位置

touchmove事件没有在谷歌Chrome上为Android发射

2 个答案: