Chrome在底層元素上出現奇怪的點擊行爲

我有以下HTML代碼。當屏幕被「封面」DIV覆蓋時，點擊按鈕和其他地方。點擊不在按鈕上不會觸發。稍後，當「封面」DIV被隱藏時，按鈕上的點擊將被觸發。Chrome在底層元素上出現奇怪的點擊行爲

看起來好像是有計時問題。有人可以解釋這種行爲嗎？

標記：

<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

來源

2012-12-27 Marc K.

你work功能不起作用（沒有雙關語意）：將凍結UI 3秒，所以點擊和其他互動將你描述來排隊。你爲什麼不通過3000到setTimeout而不是1？

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

來源

2012-12-27 20:28:42 bfavaretto

我想這是爲了（模擬一些長時間運行的腳本），因爲他已經在其他功能使用的setTimeout。但是，整個腳本是在單個線程中處理的，因此長時間運行的計算會使頁面的響應速度變慢。如果可以的話，將這些函數拆分爲更小的塊，並使用'setTimeout（callback，0）'來允許瀏覽器處理堆棧事件。 – skalee

@skalee很好的建議。如果這真的是OP正在努力解決的問題，那麼也可以考慮[網絡工作者]（https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers）。 – bfavaretto

其實在現實中，延遲是由我的服務器通過使用Ajax（函數「work」對服務器執行Ajax調用）完成的，因此不是由JavaScript代碼實現的。行爲仍然是一樣的。當我們在封面後面看到按鈕時，點擊是如何通過按鈕的。這不是我們所看到的和所做的之間的某種不一致。 –

這是因爲你被鎖定頁主題：

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

這樣可以防止被處理事件，直到它完成，以及阻止更新UI。

爲什麼不直接使用超時？ setTimeout(hide,wait);

來源

2012-12-27 20:32:11 Shmiddty

實際上，「work」函數執行Ajax調用，延遲由服務器完成（在C或PHP中進行某種睡眠）。也許我應該解釋一下，真正讓我感到困惑的是，當它被覆蓋並且封面沒有得到onclick事件時，點擊會通過按鈕。 –

多項測試後，我可以證實這種行爲。 Firefox和Chrome之間有很大的區別。

請記住，正如許多人所說，JavaScript程序是單線程的。

在Firefox中，函數「工作」正在執行的Ajax調用時，點擊將被忽略。當函數返回並且「覆蓋」消失時，沒有任何反應。

在Chrome中，點擊次數會陷入和排隊。當函數'work'返回時，onclick事件被觸發。由於「封面」已消失，因此無法獲得onclick事件。另一方面，該按鈕會收到onclick事件。例如，當我點擊按鈕兩次（當它被覆蓋時），後來我得到兩個警報。

我發現Chrome的行爲是混亂和恕我直言，錯誤，因爲當時我點擊我的眼睛自然告訴我，該按鈕被覆蓋，因此無法點擊（它不會顯示爲單擊按鈕）。

感謝您的所有答案和線索。對此，我真的非常感激。

來源

2012-12-28 06:44:10

Chrome在底層元素上出現奇怪的點擊行爲

回答

相關問題