Question

我有以下HTML代码。屏幕被＆＃34;封面＆＃34;覆盖。 DIV，点击按钮和其他地方。点击不在按钮上不会触发。后来当＆＃34;覆盖＆＃34;点击按钮时隐藏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

Answer 1

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

function busy (callback)
{
    show ();
    setTimeout (callback, 3000);
}
function work ()
{
    hide ();
}

Answer 2

这是因为您正在锁定页面线程：

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

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

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

Answer 3

经过多次测试后，我可以确认这种行为。 Firefox和Chrome之间存在很大差异。

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

在Firefox中，当函数“work”正在执行Ajax调用时，将忽略单击。当函数返回并且“覆盖”消失时，没有任何反应。

在Chrome中，点击次数会被抓住并排队。当函数'work'返回时，将触发onclick事件。由于“封面”已消失，因此无法获得onclick事件。另一方面，该按钮接收onclick事件。例如，当我点击按钮两次（当它被覆盖时），之后我会收到两个警报。

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

感谢所有的答案和线索。我真的很感激。

Chrome底层元素的奇怪点击行为

3 个答案: