6

透明な背景画像が設定された最上位レイヤーがあり、すべてのポインター イベントを無視したいと考えています。もともと私はこの設定<div style="pointer-events"></div>でうまく機能していましたが、IEがこれをサポートしていないことがわかりました。

さらに読むと、IE が をサポート<svg>していると書かれている場所がいくつかありますpointer-events:noneが、動作させることができません (これまで SVG タグを使用したことがないので、これはすべて間違っている可能性があります)。

私が達成したいことのこの非常に単純化されたフィドルを見てください。http://jsfiddle.net/AGVTM/

4

2 に答える 2

4

ルート (最上位)<svg>要素は をサポートしませんpointer-events: none。この背後にある理由は、セキュリティの悪用の可能性があるためです。Facebook の「いいね」ボタンを SVG で覆い、この例http://jsfiddle.net/rVxTn/のようにクリックを通過させることができます。

SVG 要素がルートでない場合、クリックは通過するはずです。この例は IE9 (未テスト) で動作するはずです。

http://jsfiddle.net/DLEsn/

ただし、SVG 要素内に HTML 要素を配置できないため、これでは問題は解決しません。

以前にこの問題に何度も遭遇したことがあり、さまざまな方法で回避する必要がありました。実際の問題 (および場合によってはスクリーンショット) を含む新しい質問を開いて、これを回避する方法を確認することをお勧めします。

于 2012-12-20T17:37:24.370 に答える
1

根本的な原因

絶対配置 SVG は、IE9 の HTML 要素にクリックを伝播しません。

この Webkit テスト ケースの説明を参照してください: REGRESSION(r66731): pointer-events are broken in some casesおよび対応する最小限のテスト ケース。つまり、興味深いことに、このバグは WebKit にもほぼ反映されましたが、やがて修正されました。

IE 9 の場合、結果は次のようになります。

IE 9.0.8112.16421 = テスト 1 に失敗: フローティング。テスト 2 に合格: インライン

回避策

シミュレートに関するこの StackOverflow の投稿を参照してくださいpointer-events: none。 ：なし？

彼らは特に SVG 以外のフロント要素について議論していますが、クリックを基になる要素に転送する手法は、あなたの場合にも適用される可能性があります。

于 2014-06-06T23:38:00.857 に答える