javascript - Android 浏览器触摸事件停止显示正在更新公司。 Canvas /元素 - 如何解决？

Question

在某些 android 的 native 浏览器中，触摸页面似乎会停止显示更新，直到松开手指。基于 html 元素的动画(切换类)和基于 Canvas 的动画都会发生这种情况。但是，它不会停止正常的 js 执行，并且其他事件会正常触发。在有此问题的设备上，dolphin 浏览器似乎也受到影响(虽然不是 firefox)。

Touchstart/move 都触发了 preventDefault() 以及 stopPropergation(), cancelBubble = true;和 e.returnValue = false;。在 CSS webkit 选项中也被禁用。页面不会滚动。

这里有人问过类似的问题: Does Android browser lock DOM on touchStart?

但我想知道是否可以克服这种行为，或者至少要发现该问题会影响哪些设备，是设备问题还是安卓版本问题？如果您无法回答问题，请运行演示并报告您的体验以及您的设备型号和用户代理(显示在演示页面底部)作为评论可能有助于其他人或我自己回答问题。

这是一个演示和重现该行为的步骤。可以在此处找到链接的二维码 https://s3-eu-west-1.amazonaws.com/canvas-test-pd/tmp.png .

https://s3-eu-west-1.amazonaws.com/canvas-test-pd/index.html

该网页在顶部有一个 Canvas ，在底部有一个带有背景图像的 div。 Canvas 每秒都会被清除并显示不同的图像，并且 div 会切换其类别(均在 0 和 1 png 之间切换)。切换几次后，将手指放在 Canvas 上(顶部的灰色框)并保持在那里。等待查看动画是否继续(有时会播放一两次然后停止)以及是否存在任何视觉失真。

更新似乎运行 3.2 的 Galaxy Tab 需要触摸开始/文档结束的处理程序，而不仅仅是屏幕继续更新显示所需的 div。谢谢 jimpic。

我开始相信这是制造商皮肤造成的问题，尽管这很难证明。

Answer 1

我真的不能告诉你为什么会这样，但我在注册文档触摸事件时遇到了类似的问题。当我只注册触摸移动事件时，我遇到了与您遇到的完全相同的问题，但是当我也注册了触摸启动时，它突然起作用了。在您的情况下，只需将以下行添加到您的 main.js

function touchHandlerDummy(e)
{
    e.preventDefault();
    return false;
}
document.addEventListener("touchstart", touchHandlerDummy, false);
document.addEventListener("touchmove", touchHandlerDummy, false);
document.addEventListener("touchend", touchHandlerDummy, false);

适用于我的 Galaxy Tab。希望这就是您想要做的。