次のHTMLコードがあります。画面が「カバー」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);
}