Android 浏览器触摸事件停止显示正在更新，包括画布/元素 - 如何变通

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

本文关键字：包括画 元素 何变通 更新 事件 触摸 浏览器 显示 Android      更新时间：2023-09-26

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

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

这里也提出了一个类似的问题：Android 浏览器会在 touchStart 上锁定 DOM 吗？

但我想找出是否可以克服这种行为，或者至少发现哪些设备会受到问题的影响，是设备还是版本 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 需要文档的触摸开始/结束处理程序，而不仅仅是屏幕需要div 才能继续更新显示。谢谢吉姆皮克。

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

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

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

在我的银河标签上工作。 希望这就是你想做的。

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

<meta name="viewport" content="width=device-width">
这里的

答案对我帮助很大。

我的解决方案只是简单地结合这里提到的内容，所以如果你愿意：
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. 视窗
    <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（或两者）来实现此目的
这将

解决问题:)

函数触摸处理程序傻瓜（e） { e.preventDefault（）; 返回假; } document.addEventListener（"touchmove"， touchHandlerDummy， false）;
相关文章：