4

私は、ほぼすべてがクライアント側の Javascript であるインタラクティブな視覚化アプリを構築しています。こちらを参照してください。

http://korhal.andrewmao.net:9294/#/classify/APH10154043

次のコントロールを試してください。

  • マウスホイール: ズーム
  • 空の領域をドラッグ: パン
  • 下部領域またはハンドルをドラッグ: パン/ズーム
  • 一度クリックしてからもう一度クリック: 箱を描く
  • ボックスをドラッグ: ボックスを移動
  • ボックスの端をドラッグ: サイズ変更

基礎となるメカニズムは、キャンバスを覆う SVG です。キャンバスにはz-index0 があり、SVG にはz-index1 があります。自由に DOM を調べてください。Chrome/Firefox では、すべてが問題なく動作します。

問題は、IE9 では、z-index が低くても、キャンバスが SVG 経由でクリック イベントを受信して​​いるように見えることです。マウスホイール/クリック/ドラッグ アクションはメイン チャート エリアでは機能しませんが、SVG はキャンバスよりもわずかに大きく、そこでイベントを取得するため、エッジ エリアでは機能するため、わかります。たとえば、軸領域または下部でマウスホイールを試してください。

もう少し遊んでみると、病状がわかったと思います。キャンバス (グラフ) 領域の外側にボックスを描画できるが、SVG の内側にボックスを描画できるバージョンのページを作成しました。次に、（IEで）次のことができます：

  1. 軸領域（キャンバスの外側）にボックスを描画します
  2. メインエリア（キャンバス上）にドラッグします
  3. ボックスの上にマウスを置き、マウスホイールを使用します。これで、ズーム イベントが SVG によって取得されます。ボックスのない場所でのマウスホイールにより、イベントがキャンバスに移動しました (消えました)。

そのため、マウスの下に明示的な SVG オブジェクトがある場合にのみ SVG がマウス イベントを取得しているように見えます。それ以外の場合は、キャンバスに渡され、Internet Explorer でのみ渡されます。

この問題を解決する明白な方法の 1 つは、SVG 領域全体に透明な四角形を作成することですが、それはばかげているように思えます。また、Chrome を使用しているときにパッチが適用されているが IE では壊れている、何か間違ったことをしている可能性があります。誰か提案はありますか？

注: 1 つの (削除された) 回答は、SVG 領域全体を<g>要素にラップして適用pointer-events: allすることを提案しました。しかし、それはうまくいきませんでした。キャンバスがある場所を除いて、SVG領域全体でポインターイベントが正常に検出されているため、それが必要だとは思いません。

4

1 に答える 1

4

SVG の透明な領域のクリックが基礎となる Canvas に到達するのを防ぎたい場合は、(少し変更された) 「愚かな」解決策を使用します: SVG の内容の下に透明な四角形を置きます。何かのようなもの：

<svg>
  <rect width="100%" height="100%" pointer-events="all" fill="none"/>
  <!-- … everything else … -->
</svg>

fill=none および pointer-events=all では、四角形は表示されませんが、マウス イベントを受信し、それらが基になる Canvas に到達するのを防ぎます。そのため、SVG にクリック リスナーを配置しても、キャンバスではなく SVG がクリックを受け取ります。(この手法は G 要素にも適用できますが、おそらく、100% の幅と高さを使用するのではなく、明示的に四角形を配置したいと思うでしょう。)

于 2012-10-15T05:06:36.137 に答える