javascript Android 浏览器触摸事件停止显示更新 Inc. 画布/元素 - 如何解决？

Android browser touch events stop display being updated inc. canvas/elements - How to work around?

提问by Ed Kirk

On someandroid's native browser touching the page seems to stop the display from being updated until the finger is released. This occurs for both html element based animation (switching classes) and for canvas based animation. It does not however stop normal js execution and other events are fired as normal. On devices with this problem the dolphin browser also seems effected (not firefox though).

在某些android 的本机浏览器上，触摸页面似乎会停止显示更新，直到松开手指。这对于基于 html 元素的动画（切换类）和基于画布的动画都会发生。然而，它不会停止正常的 js 执行，其他事件会正常触发。在有这个问题的设备上，海豚浏览器似乎也受到了影响（虽然不是 firefox）。

Touchstart/move both have preventDefault() fired as well as stopPropergation(), cancelBubble = true; and e.returnValue = false;. In the CSS webkit selection has also been disabled. The page will not scroll.

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

A similar question has been asked here: Does Android browser lock DOM on touchStart?

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

but I'd like to find out if this behaviour can be overcome, or at least to discover what devices will be effected by the problem, is it a device or version android issue? If you cannot answer the question running the demo and reporting your experience along with your device model and useragent (displayed at bottom of demo page) as a comment might help others or myself answer the question.

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

Here is a demo and steps to reproduce the behaviour. A QR code for the link can be found here https://s3-eu-west-1.amazonaws.com/canvas-test-pd/tmp.png.

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

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

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

The web page has a canvas at the top and a div with a background image at the bottom. Every second the canvas is cleared and a different image displayed and the div has it's class switched (both toggle between 0 and 1 pngs). Once this has toggled a few times place your finger on the canvas (the top grey box) and hold it there. Wait to see if the animation continues (sometimes it will once or twice then stops) and if there are any visual distortions.

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

UpdateIt seems that the Galaxy Tab running 3.2 requires handlers for touchstart/end of document, not just required divs for the screen to continue updating the display. Thanks jimpic.

更新似乎运行 3.2 的 Galaxy Tab 需要用于 touchstart/end of document 的处理程序，而不仅仅是屏幕需要 divs 才能继续更新显示。谢谢吉姆皮克。

I'm starting to believe it's an issue caused by manufacturers skins, although this is difficult to prove.

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

回答by jimpic

I can't really tell you why this is happening, but I came across a similar problem, when registering for documents touch events. When I registered for only touch move events, I had exactly the same problem you are experiencing, however when I registered for touchstart too, it suddenly worked. In your case, just add the following lines to your main.js

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

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

Works on my Galaxy Tab. Hope this is what you were trying to do.

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

回答by Danylo Mysak

I had the very same problem. Magically enough, the problem disappeared completely when I added the following line to the <header>section:

我有同样的问题。神奇的是，当我将以下行添加到该<header>部分时，问题完全消失了：

<meta name="viewport" content="width=device-width">

回答by Petr Urban

Answers here helped me a lot.

这里的答案对我帮助很大。

My solution is simply combination of what has been mentioned here, so if you want:
1. "drag and drop" on Samsung Galaxy S2 native browser (Android 4.1.2)
2. disable user scaling the page (viewport set to no scaling)

我的解决方案只是这里提到的内容的简单组合，因此，如果您愿意：
1. 在三星 Galaxy S2 原生浏览器（Android 4.1.2）上“拖放”
2. 禁用用户缩放页面（视口设置为不缩放）

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.01">
    <script>
        window.addEventListener("load", function() {
            function onTouchPreventDefault(event) { event.preventDefault(); };
            document.addEventListener("touchmove", onTouchPreventDefault, false);
            document.addEventListener("touchstart", onTouchPreventDefault, false);
        }, false);
    </script>
</head>

1. Viewport
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.01">

   • unfortunately user can still zoom the page in a little bit, 1.01 is the smallest value that does the job

2. Disable pinch to zoom
   document.addEventListener("touchmove", function (event) { event.preventDefault(); }, false);

   • this disables pinch to zoom

3. Disable double tap to zoom
   document.addEventListener("touchstart", function (event) { event.preventDefault(); }, false); //OR document.addEventListener("touchend", function (event) { event.preventDefault(); }, false);

   • this disables double tap to zoom, you can choose if you want to use touchstart or touchend (or both) for this purpouse

1. 视口
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.01">

   • 不幸的是，用户仍然可以稍微放大页面，1.01 是完成这项工作的最小值

2. 禁用双指缩放
   document.addEventListener("touchmove", function (event) { event.preventDefault(); }, false);

   • 这将禁用捏缩放

3. 禁用双击缩放
   document.addEventListener("touchstart", function (event) { event.preventDefault(); }, false); //OR document.addEventListener("touchend", function (event) { event.preventDefault(); }, false);

   • 这将禁用双击缩放，您可以选择是否要为此目的使用 touchstart 或 touchend（或两者）

回答by k0sh

this will do the trick :)

这将解决问题:)

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

function touchHandlerDummy(e) { e.preventDefault(); 返回假；} document.addEventListener("touchmove", touchHandlerDummy, false);