拉斐尔和IE.Mouseout解决方法

Question

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

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

Answer 1

自Raphael 2.0.2以来,Raphael和Internet Explorer(所有版本)都存在一个问题,即对路径进行各种操作(例如重置转换.toFront(),或者在悬停时.toBack()调用)hover()可能会导致鼠标悬停无休止地循环和/或悬停到被错过了.

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

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

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

在这个jsfiddle中有一些观察和演示(阅读和取消注释各种评论).

这里一个很好的解决方法是使用某种标志,例如'path.data('hoverIn',true); on mouse in and 'path.data( 'hoverIn', false );在鼠标输出时,然后.toFront()在检查中包装任何或违规的变换,!path.data( 'hoverIn' )以便它只能发生一次,直到鼠标移出.或者,存储后某处一个参考最近盘旋路toFront()或什么的,那就不要toFront()或什么,如果这路也是最近徘徊之一.