(浏览器)屏幕触摸似乎会干扰重画?

发布于 2024-11-18 14:59:27 字数 862 浏览 8 评论 0原文

我试图实现基本的拖放测试,并遇到了一个奇怪的问题。我将其简化为下面的示例以缩小原因。 本质上,我有一个计时器,它每秒都会翻转一个盒子的颜色。现在,当我加载页面时,您可以看到它毫无问题地交替框的颜色。

问题是,如果您触摸屏幕,您会注意到颜色更新停止发生!我的事件仍然被触发,因为我可以在控制台日志中看到它,但由于某种原因,实际的 UI 没有改变。

有谁知道发生了什么以及是否有解决方法?我在 android 2.1 上看到了这个。我最初遇到这个问题是因为我有触摸事件侦听器尝试进行拖放:)

谢谢!

window.onload=function(){

    setInterval("flipColor()", 1000);

}


function flipColor(){

    var color = document.getElementById("foo").style.backgroundColor;
    console.log("changing color, current it is "+color);
    if(color == "red")
        document.getElementById("foo").style.backgroundColor = "blue";
    else
        document.getElementById("foo").style.backgroundColor = "red";
}

在我的 DOM 中我只有这个 -

<div id="foo" style= "position:absolute; width:100px; height: 100px; background-color: red" ></div>

I was trying to implement a basic drag and drop test, and ran into a strange issue. I simplified it to the example below to narrow down the cause.
Essentially, I have a timer that will flip the color of a box every second. Now when I load the page, you can see it alternating the colors of the box without an issue.

The problem is, if you touch the screen, you'll notice that the color update stops happening! My event is still getting fired because I can see it in the console log, but for some reason the actual UI does not change.

Does anyone have an idea of what is going on, and if there is a workaround? I'm seeing this on android 2.1. I originally came across this because I had touch event listeners trying to do drag and drop :)

Thanks!

window.onload=function(){

    setInterval("flipColor()", 1000);

}


function flipColor(){

    var color = document.getElementById("foo").style.backgroundColor;
    console.log("changing color, current it is "+color);
    if(color == "red")
        document.getElementById("foo").style.backgroundColor = "blue";
    else
        document.getElementById("foo").style.backgroundColor = "red";
}

in my DOM I have just this -

<div id="foo" style= "position:absolute; width:100px; height: 100px; background-color: red" ></div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文