9

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

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

这里也问了一个类似的问题： Android browser lock DOM on touchStart?

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

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

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

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

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

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

4

4 回答 4

7

我无法真正告诉您为什么会发生这种情况，但是在注册文档触摸事件时遇到了类似的问题。当我仅注册触摸移动事件时，我遇到了与您遇到的完全相同的问题，但是当我也注册了 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);

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

于 2012-05-08T09:11:07.270 回答
3

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

<meta name="viewport" content="width=device-width">
于 2013-12-21T18:19:41.590 回答
1

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)

<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
于 2014-05-20T13:20:17.490 回答
0

这会成功的:)

函数 touchHandlerDummy(e) { e.preventDefault(); 返回假；} document.addEventListener("touchmove", touchHandlerDummy, false);
于 2012-11-25T11:00:53.223 回答