2

次のような svg 構造があります。

<svg>
   <g id="main-group">
     ...
      <rect id="event-rect"></rect>
   </g>
</svg>

同じイベントを #event-rect と #main-group に添付しました

 d3.select('#event-rect').on('mousemove', clb);
 d3.select('#main-group').on('mousemove', clb2);

ここでの問題は、最初の clb がトリガーされるのに対して、親ノード (つまり #main-group) のイベント リスナーがトリガーされないことです。

ここでイベント バブリング フェーズが機能しないのはなぜですか?

使用する実際のコードは次のとおりです。

 d3.select('#event-rect').on('mousedown', mousedown);
 d3.select('#event-rect').on('mousemove', mousemove);
 d3.select('#event-rect').on('mouseup', mouseup);

次に、別のモジュールで、同じイベントのセットを添付します。

 d3.select('#main-group').on('mousedown', dragStart);
 d3.select('#main-group').on('mousemove', mousemove);
 d3.select('#main-group').on('mouseup', dragEnd);

dragStart を除くすべてのコールバックが呼び出されます。私には何の意味もありません

4

1 に答える 1

2

要素の寸法が同一の場合、g要素は によって隠されますrect。何をしたいかによって、いくつかのオプションがあります。

  • 要素のサイズを大きくしてg、マウスがrect.
  • 要素のリスナーをg完全に削除し、そのアクションを のハンドラーで実行できますrect。
  • 同様に、要素からリスナーを削除し、rect要素のリスナーですべてを処理できますg。
于 2013-07-02T09:24:03.507 に答える