15

のようなクリック可能なコンテンツがある場合<a>、<input>または<area>その前に、より大きなz-indexを持つ絶対位置の要素がある場合、「クリックスルー」の誤った動作があります。
クリック可能な要素が前の要素の後ろにある領域をクリックします。他のブラウザでは、クリックがフロント要素を通過しないという正しい動作があります。ただし、Androidブラウザーでのみ、前の要素をクリックして後ろの要素をアクティブ化できます。これは既知のバグであり、回避することはできません。それは新しいバージョンでもあります（私は公式のAndroidエミュレーターで2.3.3でテストします）。

いくつかのフォーラムで説明されているいくつかの回避策がありますが、それらのどれも私のために働きませんでした。

  • 前後<iframe>の間にまたはを入れてみました<a>
  • DOMを変更しようとしたので、ブラウザの状態が更新される可能性があります
  • 後ろの要素も配置しようとしましたなし機能しません

特に画像マップのエリア要素に問題があります。

誰かが同じ問題を抱えていて、それを回避することができましたか？画像マップに対してテストされるソリューションに特に興味があります。

4

3 に答える 3

4

私はここでいくつかのことについて疑問に思っています。まず、画像をオーバーレイして画像マップを使用する目的は何ですか？jQueryが含まれているようです-jQueryでホバーイベントを使用して画像の向きを変更し、スワップを実行できますか？画像マップのクリックイベントに添付して、ライトボックスが開いているかどうかを確認するのはどうでしょうか。そうである場合は、return false;。

大声で考えようとしているだけです。時には別の見方が役立つことがあります。

于 2012-01-29T03:08:16.783 に答える
2

これは目隠しをした簡単な返信ですので、さらに拡張/修正する必要があるかどうかをお知らせください。一般的な考え方は、ポインターの相互作用を無効にするホバーイベントとフォーカスイベントの両方のCSSクラスです。

yourElementClass:focus, yourElementClass:hover {
    pointer-events: none;
}
于 2012-11-26T14:25:48.767 に答える
1

実際、下のオブジェクトを動かして見えないようにすることで、それを回避することができました。しかし、あなたと同様の場合、実際に機能する唯一の回避策は、jqueryのすべてのクリック（特にバックグラウンドのクリック）を管理し、必要に応じてクリックイベントをバインド/バインド解除することです。一部のバージョン/モバイルで役立つ可能性のあるものもいくつかあります（ただし、問題は解決しません）

  • 上記のアイテムにはbackground：rgba（0,0,0,0.1）;があります。
  • 上記の要素の背景としてgifまたはpngを配置する必要があります（ポイント1の背景色も同様）
  • バインドイベントとしてクリックの代わりにthouchstartを使用すると役立つ場合があります。

android / browserの実際のバージョンは、このバグの影響を受けません（または、少なくとも私には起こりません）が、影響を受けるバージョンを知っておくと便利です。誰かがリストを持っている場合。

于 2015-09-08T07:01:43.737 に答える