Raphael und IE. MouseOut Problemumgehung

Seit Raphael 2.0.2 gab es in Raphael und Internet Explorer (alle Versionen) ein Problem, bei dem verschiedene Manipulationen eines Pfades wie das Zurücksetzen einer Transformation, .toFront() , oder .toBack() von hover() aufgerufen werden können, während man schwebt Verursachen Sie Hover-Ins, um endlos zu loopen und / oder Houses auszublenden, um verpasst zu werden.

Während hover im IE meistens für Mouseout funktioniert, gibt es ein paar Dinge, die ich gefunden habe, dass es stolpern kann, a) ignoriert Mouseouts wie beschrieben und b) triggert das Mouseover-Ereignis rekursiv Wenn Sie eine console.log-Datei dort einfügen, bricht die Konsole des IE-Entwicklertools ab und wird grau ... was manchmal auch zu verhindern scheint, dass Mouseouts erkannt werden.

Hier sind die Dinge, die ich gefunden habe, die das verursachen:

• Zurücksetzen einer Transformation, bei der das Element unter der Maus verschoben wird, und erneutes Anwenden des Elements unter dem Cursor. Nicht-IE macht weiter wie nichts passiert ist und funktioniert gut, IE flippt aus wie oben beschrieben.
• .toFront () und .toBack () - Nicht-IE erkennt das verschobene Element als das gleiche Element an der gleichen XY-Position, IE läuft wie oben beschrieben aus.

Es gibt einige Beobachtungen und Demonstrationen in diesem jsfiddle (lesen Sie die verschiedenen Kommentare aus und entfernen Sie sie aus den Kommentaren.) ).

Eine gute Problemumgehung ist hier, eine Art Flag zu haben, wie zum Beispiel 'path.data (' hoverIn ', true); on mouse in and 'path.data( 'hoverIn', false ); bei mouse out, dann wrap alle .toFront() oder anstößige Transformationen in ein Häkchen !path.data( 'hoverIn' ) , so dass es nur einmal passieren kann, bis die Maus aus ist. Oder speichern Sie einen Verweis auf den zuletzt verschobenen Pfad irgendwo nach dem toFront() oder was auch immer, dann nicht toFront() oder was auch immer, wenn dieser Pfad auch der zuletzt gespeicherte Pfad ist.

Ich hatte das gleiche Problem (map mit Regionen, die den Hintergrund beim Hover änderten) und der Deal-Braker in IE9 / Opera war für mich die toFront () Methode. Ich habe das entfernt und es funktioniert gut.

Ich habe diese Einschränkung umgangen, indem ich den Code in eine anonyme Funktion gesetzt und ihn dann über den Ereignishandler setTimeout inside aufgerufen habe.

Wenn Sie ein Rect als Hintergrund unterhalb des Objekts hinzufügen (und es enthält), können Sie einen Mouseout-Effekt erzielen, indem Sie dem Hintergrundrect einen weiteren Hover-Ereignishandler hinzufügen.