SVG Onmouseover für die Gruppe mit überlappenden Elementen tritt zweimal

Question

Wenn eine Funktion zum onmouseover Ereignisse für eine SVG-Gruppe <g>...</g> Anbringen tritt das Ereignis einmal, jedesmal, wenn der Zeiger auf ein Element in der Gruppe eintritt.

Dies geschieht auch, wenn zwei Elemente in der Gruppe ineinander erscheinen.

Zum Beispiel:

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

Wenn der Zeiger geht in den A Rechteck, und von dort zu dem B Rechteck bewegt, ohne A zu verlassen, wird die onmouseover Events der Gruppe G ausgelöst, die sowohl A und B enthält.

Das Ereignis tritt nur einmal, so dass ich glaube nicht, dass es auf Ereignisse bezieht sprudeln.

erwartete ich die Gruppe als fester Block behandelt werden, so dass ich nicht über seine Nachkommen kümmern, wenn seine eigenen Veranstaltungen zu setzen.

Alle Work-around? Mache ich das richtig? Gibt es einen besseren Weg?

Answer 1

Kommt mir bekannt vor, ich glaube, das Sprudeln Sie in solchen Fällen beißen wird.

Einige Beispiele von einem meiner SVG öffnen Präsentationen im Jahr 2008, insbesondere slide 17 sollte von Interesse sein. Es könnte sein, dass so etwas mit ‚MouseEnter-‘ / ‚mouseleave‘ Ereignissen dieses Problem lösen würde, aber sie sind noch nicht in einer W3C-Empfehlung.

Edit: Um klare mouseenter und mouseleave sind in der DOM Level 3 Veranstaltungen Arbeitsentwurf.

Answer 2

Sie können prüfen, welches Element die Maus wurde in. Wenn sein Teil einer bestimmten Gruppe, dann die Maus-Ereignis ignorieren. Wie so:

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

Hier ist eine Geige: http://jsfiddle.net/pFTfm/57/