如何防止事件通過IE中的重疊元素泄漏？

考慮下面的HTML：如何防止事件通過IE中的重疊元素泄漏？

<div class="with-shield"> 
    <div class="shield"></div> 
    <input type="radio"/> 
</div>

...和CSS：

.with-shield { 
    position: relative; 
} 

.shield { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 100; 
}

（Fiddle）。（儘管開發人員工具顯示.shield的位置正確），但IE9（和我假設的老版本）確實存在（即使開發人員工具顯示.shield已正確放置），但FireFox和Chrome不會讓您單擊單選按鈕（因爲.shield位於其頂部）。

我怎樣才能改變CSS讓.shield吸納點擊事件（即停止用戶能夠選擇單選）在IE？

我需要這個，因爲我提出一個客戶的結果調查員工，只需重新顯示錶格視圖;我想添加一個覆蓋來阻止員工意外更改值（我已經禁用了tabIndex等）。

來源

2012-06-15 user1459303

集的z-index爲盾。 –

@EvanLarsen：已經嘗試過，（http://jsfiddle.net/AyHzZ/1/）;問題更新反映。 – user1459303

你可能有一個更簡單的時間使輸入禁用http://jsfiddle.net/AyHzZ/2/的[怎麼可能通過的位置單擊 –

有點晚了，但是做這樣的事情：

#BlockAction{bottom: 0; left: 0; position: absolute; top: 0; right:0; z-index: -1;} 
#BlockAction.Blocked{z-index: 1000; cursor:wait;background-color:#fff;opacity:0}

背景顏色和透明度將滿足IE9允許透明背景點擊經歷。其他瀏覽器在沒有它的情況下捕獲點擊。

來源

2012-11-09 10:34:13

剛剛有同樣的問題。 MUTHU庫馬蘭的是偉大的，但它沒有考慮IE < 8.這裏是你如何能做到這一點：

.with-shield { 
    position: relative; 
} 

.shield { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 100; 

background-color:#fff; 
opacity:0; 
filter: alpha(opacity = 001); 

}

遺憾的是沒有的jsfiddle也不jsbin是在IE8正常運行，所以我可以告訴你，但我創建了一個在我的本地機器上測試頁面並進行測試，並按預期工作。

來源

2013-04-04 19:42:36

即使後來參加聚會，但是這是我做過什麼：

只需使用一個1x1像素的透明GIF作爲背景的一個base64編碼，這將停止所有的點擊/水龍頭（也IE9和IE8測試）。

background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

來源

2013-11-06 12:44:36

這很好。對其他人使用它的好處是它仍然允許子組件具有不透明性。 – cgatian

太棒了！完美修復。應該標記爲正確答案。 – Ben

偉大的修復，適用於IE10以及IE9！非常感謝凱文！ – Jeroen

如何防止事件通過IE中的重疊元素泄漏？

回答

相關問題