(浏览器)屏幕触摸似乎会干扰重画?
我试图实现基本的拖放测试,并遇到了一个奇怪的问题。我将其简化为下面的示例以缩小原因。 本质上,我有一个计时器,它每秒都会翻转一个盒子的颜色。现在,当我加载页面时,您可以看到它毫无问题地交替框的颜色。
问题是,如果您触摸屏幕,您会注意到颜色更新停止发生!我的事件仍然被触发,因为我可以在控制台日志中看到它,但由于某种原因,实际的 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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论