禁用：z-index圖層上的活動僞類

Question

我正在開發一個移動web應用程序，我對此有點困惑： 我有一個叫做UpperDiv的div，z-index爲50，在那個div下，還有另外一個名爲UnderDiv的z-index 0. 問題是，當我在UpperDiv上「點擊」時，它會激活我的UnderDiv的一個元素（點擊它）的活動僞類。我該怎麼做才能禁用它？

----------------------------- EDITED ---------------- ----------------

它終於有效！

我忘了提及我正在使用轉換來打開/關閉我的UpperDiv。 所以打開時，我使用：

$('#myDiv').css('-webkit-transform', 'translate3d(200px, 0px, 0px)').bind('webkitTransitionEnd', function(){ 
    $('.underDiv').css('pointer-events', 'none'); 
}); 

當我關閉：

$('#myDiv').css('-webkit-transform', 'translate3d(0px, 0px, 0px)').bind('webkitTransitionEnd', function(){ 
    $('.underDiv').css('pointer-events', 'auto'); 
}); 

它正常工作對我來說，如果它可以幫助別人......

Answer 1

如果這是在Android上，它將類似於這個問題

Is there a workaround for the Android browser bug with CSS-Position and clickable areas?

這是Android瀏覽器中的一個錯誤（並且僅限於此），當您更改頁面的DOM以及一些z-index堆棧時會出現這種錯誤。即使有東西堆疊在它上面，下面的圖層也是鼠標點擊的目標。

上述問題有一些解決方法可能適用於您。

---

我讀了關於在兩個div之間使用z-index 20的空白flash電影。

---

這是另一個問題，這可能有答案 Android Webkit: Absolutely positioned elements don't respect z-index

---

在谷歌的問題頁面上有解決方法的一些開發商。 https://code.google.com/p/android/issues/detail?id=6721#c26

問題是：如果更改HTML元素的CSS（例如顯示），則Android瀏覽器不會像更改DOM一樣跟蹤UI更改。更改和UI活動區域不會通過僅更改CSS來正確同步。他們將通過改變DOM。

因此，如果您在CSS中顯示包含更改的高分辨率索引圖層，請相應地更改該圖層的DOM。這包括某些數據屬性中的一些亂碼。

---

評論https://code.google.com/p/android/issues/detail?id=6721#c55可能有一個解決方案，也