拉斐尔和IE。 Mouseout解决方法

Question

我在IE浏览器上使用Raphael进行SVG效果时遇到了一个问题。当鼠标悬停在对象上时，动画按预期发生。但是，在mouseout上，永远不会调用mouseout动作，因此对象会陷入鼠标悬停状态。

过去我见过其他人抱怨过这个问题，但我看到的唯一解决办法是强制每个对象上的mouseover事件返回所有内容！=当前对象恢复正常状态。我宁愿不做一般的“重置一切”，因为我有很多对象，所以我想知道是否有人有他们可以建议的替代方案。我正在考虑将最后一个触发鼠标悬停的最后一个对象存储在变量中，并且只在每次鼠标悬停时重置它，这可能会起作用....

Answer 1

自Raphael 2.0.2以来，Raphael和Internet Explorer（所有版本）都出现了一个问题，即路径的各种操作，例如重置变换，.toFront()或.toBack()从{{{ 1}}当悬停时可能导致悬停ins无休止地循环和/或悬停出局而错过。

虽然hover()在鼠标输入的IE中大部分工作正常但是我发现有一些东西可以将它绊倒，导致它a）忽略你描述的鼠标移动并且b）触发鼠标悬停事件递归地，如果你把一个console.log放在那里，IE开发人员工具的控制台就会中断并变成灰色......这有时似乎也阻止它识别出鼠标。

以下是我遇到的导致这种情况的事情：

• 重置变换，这将导致元素从鼠标下移动，然后重新应用它将元素放回光标下。非IE继续没有发生任何事情并且工作正常，IE如上所述吓坏了。
• .toFront（）和.toBack（） - 非IE将移动的元素识别为同一X Y位置中的相同元素，IE如上所述吓坏了。

此jsfiddle 中有一些观察和演示（阅读并取消注释各种评论）。

这里一个很好的解决方法是在鼠标输出时使用某种标记，例如'path.data（'hoverIn'，true）; hover，然后包装任何on mouse in and 'path.data( 'hoverIn', false );或违反变换检查.toFront()以便它只能发生一次，直到鼠标移出。或者，在!path.data( 'hoverIn' )或其他任何地方存储对最近悬停路径的引用，然后如果此路径也是最近悬停的路径，则不要toFront()或其他任何内容。

Answer 2

我有同样的问题（地图上有悬停时改变背景的区域）和IE9 / Opera中的交易制作者对我来说是toFront（）方法。我删除了它，它工作正常。

Answer 3

我通过将代码放在匿名函数中然后通过事件处理程序中的setTimeout调用它来解决这个限制。

Answer 4

如果你在下面（并且包含）你想要鼠标输出的对象下面添加一个rect作为背景，你可以通过向后台rect添加另一个悬停事件处理程序来有效地获得mouseout效果。