拉斐爾和IE。 Mouseout解決方法

Question

我在IE瀏覽器上使用Raphael進行SVG效果時遇到了一個問題。 當鼠標懸停在對象上時，動畫按預期發生。 但是，在mouseout上，永遠不會調用mouseout動作，因此對象會陷入鼠標懸停狀態。

我見過其他人過去抱怨這個問題，但我看到的唯一解決辦法是強制每個對象上的mouseover事件返回所有內容！=當前對象恢復正常狀態。 我寧願不做一般的“重置一切”，因為我有很多對象，所以我想知道是否有人有他們可以建議的替代方案。 我正在考慮將最后一個觸發鼠標懸停的最后一個對象存儲在變量中，並且只在每次鼠標懸停時重置它，這可能會起作用....

Answer 1

自拉斐爾2.0.2以來，拉斐爾和Internet Explorer（所有版本）中存在一個問題，其中在懸停時從hover()重置轉換， .toFront()或.toBack()的路徑的各種操作可能導致徘徊在無休止地循環和/或懸停出局被遺漏。

雖然hover大多數在IE中用於鼠標輸出正常，但我發現有一些東西可以將它絆倒，導致它a）忽略你描述的鼠標移動並且b）遞歸地觸發鼠標懸停事件，這樣如果你放了一個在那里的console.log，IE開發人員工具的控制台中斷並變成灰色......這有時似乎也阻止它識別鼠標。

以下是我遇到的導致這種情況的事情：

• 重置變換，這將導致元素從鼠標下移動，然后重新應用它將元素放回光標下。 非IE繼續沒有發生任何事情並且工作正常，IE如上所述嚇壞了。
• .toFront（）和.toBack（） - 非IE將移動的元素識別為同一XY位置中的相同元素，IE如上所述嚇壞了。

在這個jsfiddle中有一些觀察和演示（閱讀和取消注釋各種評論）。

這里一個很好的解決方法是使用某種標志，例如'path.data（'hoverIn'，true）; on mouse in and 'path.data( 'hoverIn', false ); 在鼠標輸出時，然后在!path.data( 'hoverIn' )的檢查中包裝任何.toFront()或違規變換，這樣它只能發生一次，直到鼠標移出。 或者，在toFront()或其他之后的某處存儲對最近懸停路徑的引用，然后不要toFront()或者如果此路徑也是最近懸停的路徑。

Answer 2

我有同樣的問題（地圖與懸停時改變背景的區域）和IE9 / Opera中的交易制作者對我來說是toFront（）方法。 我刪除它，它工作正常。

Answer 3

我通過將代碼放在匿名函數中然后通過事件處理程序中的setTimeout調用它來解決這個限制。

Answer 4

如果您在下面（並包含）要嘗試鼠標移除的對象下添加一個rect作為背景，則可以通過向后台rect添加另一個懸停事件處理程序來有效地獲得鼠標移除效果。