使更高的z-index元素禁用更低元素onclick

我有一個'圖層'，我想給一個onclick。訣竅是，我希望上面的圖層上的元素在單擊時不執行該操作。使更高的z-index元素禁用更低元素onclick

我該如何做到這一點？

謝謝！

來源

2011-03-19 Nathan

調用event.stopPropagation()以防止「鼓泡」。或者，如上所述，更改絕對定位元素的父母關係。

來源

2011-03-19 19:22:34

我有點困惑，我認爲這會通過瀏覽器自然發生。從我收集你試圖做這樣的事情：

<html> 
    <body> 
    <div id="block" style="position:absolute; top:0; left:0; width:200px; height:200px; background-color:red;" onclick="alert('clicked');"></div> 
    <div id="block" style="position:absolute; top:0; left:0; width:100px; height:100px; background-color:blue;"></div> 
    </body> 
</html>

[並不是一個真正的答案，但因爲我想張貼代碼我不覺得評論是恰當]

來源

2011-03-19 19:07:10

的您遇到的問題是由事件通過DOM樹傳播的方式引起的。當您單擊頁面上的元素時，該元素的點擊處理程序將有機會響應點擊。除非處理程序停止事件傳播，否則父元素將有機會處理該事件，依此類推直到達到根元素。

這種行爲通常感覺很自然，每個「在」被單擊的元素「後面」的元素都有機會對事件作出響應。但是，當您使用絕對定位時，您可以將元素放在dom樹中不是其祖先的另一個元素的前面。此時事件傳播可能會令人困惑。只有被點擊元素的祖先纔會收到點擊事件，這意味着它後面的元素可能不會。

我創建了一個jsfiddle - http://jsfiddle.net/HUGNd/ - 來說明這種情況。

解決此問題的一個快速方法是確保您要響應單擊事件的元素是被單擊的元素的祖先。否則，無論調用哪個元素的事件處理程序，您都可以在JavaScript中實現所需的結果。

來源

2011-03-19 19:11:13 tilleryj

使更高的z-index元素禁用更低元素onclick

回答

相關問題