0

我有以下 HTML 代码。当屏幕被“cover”DIV 覆盖时，单击按钮和其他位置。未点击按钮不会触发。稍后，当“封面”DIV 被隐藏时，点击按钮就会触发。

似乎存在时间问题。有人可以解释这种行为吗？

标记：

<div id="cover"></div>
<button onclick="alert('Button clicked')">Click me</button>
<div id="text"></div>​

CSS：

#cover {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: white;
    opacity: 0.8
}​

Javascript：

function hide ()
{
    document.getElementById ("cover").style.display = "none";
}
function show ()
{
    document.getElementById ("cover").style.display = "block";
}
function busy (callback)
{
    show ();
    setTimeout (callback, 1);
}
function work ()
{
    var start = (new Date ()).getTime ();
    var wait  = 3000;
    while ((new Date()).getTime () - start < wait)
    {
        /* do nothing */
    }
    hide ();
}
function start ()
{
    document.getElementById ("cover").onclick = function (ev) {
        document.getElementById ("text").innerHTML = 'Cover clicked';
    };
    busy (work);
}​

http://jsfiddle.net/userdude/5DutW/4

4

3 回答 3

4

您的work功能不起作用（没有双关语）：它将冻结 UI 3 秒钟，因此单击和其他交互将按照您的描述排队。你为什么不直接传递3000给setTimeout而不是1？

function busy (callback)
{
    show ();
    setTimeout (callback, 3000);
}
function work ()
{
    hide ();
}
于 2012-12-27T20:28:42.577 回答
0

发生这种情况是因为您正在锁定页面线程：

while ((new Date()).getTime () - start < wait)
{
    /* do nothing */
}

这可以防止在事件完成之前处理事件，并防止更新 UI。

为什么不直接使用超时呢？setTimeout(hide,wait);

于 2012-12-27T20:32:11.567 回答
0

经过多次测试，我可以确认这种行为。Firefox 和 Chrome 之间有很大的不同。

请记住，正如许多人所说，Javascript 程序是单线程的。

在 Firefox 中，当函数 'work' 执行 Ajax 调用时，点击会被忽略。当函数返回并且“cover”消失时，什么也没有发生。

在 Chrome 中，点击会被捕获并排队。当函数 'work' 返回时，会触发 onclick 事件。由于“封面”已经消失，它没有得到 onclick 事件。另一方面，按钮接收 onclick 事件。例如，当我两次单击按钮时（当它被覆盖时），稍后我会收到两个警报。

我发现 Chrome 的行为令人困惑，恕我直言错误，因为当我点击时，我的眼睛自然会告诉我该按钮已被覆盖，因此无法点击（它不会显示为点击按钮）。

感谢所有的答案和线索。对此，我真的非常感激。

于 2012-12-28T06:44:10.533 回答