1

私はモバイル Web アプリを開発していますが、何かと少し混乱しています。z-index が 50 の UpperDiv と呼ばれる div が 1 つあり、その div の下に、z-index 0 の UnderDiv と呼ばれる別の div があります。問題は、UpperDiv を「タップ」すると、UnderDiv の要素 (クリックした場所) で :active 疑似クラスがアクティブになることです。これを無効にするにはどうすればよいですか?

----------------------------- 編集済み -------------------- ------------

それは最終的に動作します!!!!

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');
});

それが他の誰かを助けることができれば、それは私にとってはうまくいきます...

4

1 に答える 1

0

これがAndroidの場合、この質問に似ています

CSS-Position とクリック可能領域に関する Android ブラウザーのバグの回避策はありますか?

これは、ページの DOM をいくつかの z-index スタッキングと共に変更したときに発生する、Android ブラウザー (およびそこでのみ発生する) のバグです。下のレイヤーは、その上に何かが重ねられていても、マウス クリックのターゲットになります。

上記の質問には、あなたに役立ついくつかの回避策があります。

2 つの div の間に z-index 20 を持つ空のフラッシュ ムービーを使用することについて読みました。

Android Webkit : 絶対配置された要素は z-index を尊重しません

Google の問題ページには、一部の開発者による回避策があります。 https://code.google.com/p/android/issues/detail?id=6721#c26

問題は、HTML 要素 (ディスプレイなど) の CSS を変更した場合、Android ブラウザーは、DOM が変更された場合と同じ方法で UI の変更を追跡しないことです。CSS を変更しただけでは、変更と UI アクティブ領域が正しく同期されません。それらはDOMを変更することによるものです。

したがって、CSS を変更して hight z-index レイヤーを表示する場合は、それに応じてそのレイヤーの DOM を変更してください。これには、いくつかの data- 属性の意味不明な部分が含まれます。

コメントhttps://code.google.com/p/android/issues/detail?id=6721#c55にも解決策があるかもしれません

于 2013-09-23T09:28:38.777 に答える