重複する要素を持つグループのSVG onmouseoverが2回発生する

Question

SVGグループonmouseoverの<g>...</g>イベントに関数をアタッチすると、イベントが1回発生し、ポインタがグループ内の要素に入るたびに発生します。

これは、グループ内の2つの要素が別の要素の内側に表示される場合でも発生します。

例：

+-----+
|A ___|
|  |B |
|__|__|

ポインターがAの長方形に入り、そこからBを離れずにGの長方形に移動すると、<=>と<の両方を含むグループ<=>の<=>イベントがトリガーされます=>。

イベントは1回しか発生しないため、イベントのバブルに関連するとは思わない。

グループがソリッドブロックとして扱われることを期待していたので、独自のイベントを設定するときにその子孫を心配する必要はありません。

回避策はありますか？私はそれを正しくやっていますか？より良い方法はありますか？

Answer 1

おなじみのように聞こえますが、そのような場合には泡立ちがあなたを噛むと思います。

2008年のSVG Openプレゼンテーションの1つの例、特に slide 17 は興味深いものです。 'mouseenter' / 'mouseleave'イベントのようなものがあればこれを解決できるかもしれませんが、それらはまだw3cの推奨事項に含まれていません。

編集：明確にするために、mouseenterおよびmouseleaveは DOMレベル3イベント作業ドラフト。

Answer 2

マウスがどの要素に入ったかを確認できます。特定のグループの一部である場合は、マウスイベントを無視します。そのように：

function isRelated(e) { 
    if ($(e.relatedTarget).closest('#rect1,#rect2).length == 0) { //http://api.jquery.com/closest/
        return false;
    }
    return true;
}

フィドル： http://jsfiddle.net/pFTfm/57/