我在IE浏览器上使用Raphael进行SVG效果时遇到了一个问题.当鼠标悬停在对象上时,动画按预期发生.但是,在mouSEOut上,永远不会调用mouSEOut动作,因此对象会陷入鼠标悬停状态.
我见过其他人过去抱怨这个问题,但我看到的唯一解决办法是强制每个对象上的mouSEOver事件返回所有内容!=当前对象恢复正常状态.我宁愿不做一般的“重置一切”,因为我有很多对象,所以我想知道是否有人有他们可以建议的替代方案.我正在考虑将最后一个触发鼠标悬停的最后一个对象存储在变量中,并且只在每次鼠标悬停时重置它,这可能会起作用….
解决方法
由于拉斐尔2.0.2,有许多人在拉斐尔的问题和Internet Explorer(所有版本),其中一个路径的各种操作,如重置变换,.toFront(),或.toBack()从悬停()调用而悬停可引起徘徊在无休止地循环和/或悬停出局被遗漏.
虽然悬停大多数在IE中用于鼠标输出正常,但我发现有一些东西可以将它绊倒,导致它a)忽略你描述的鼠标悬停和b)递归触发鼠标悬停事件,这样如果你放了一个在那里的console.log,IE开发人员工具的控制台中断并变成灰色…这有时似乎也阻止它识别鼠标.
以下是我遇到的导致这种情况的事情:
>重置变换,这将导致元素从鼠标下移动,然后重新应用它将元素放回光标下.非IE继续没有发生任何事情并且工作正常,IE如上所述吓坏了.
> .toFront()和.toBack() – 非IE将移动的元素识别为同一X Y位置中的相同元素,IE如上所述吓坏了.
在这个jsfiddle中有一些观察和演示(读取和取消注释各种评论).
这里一个很好的解决方法是使用某种标志,例如’path.data(‘hoverIn’,true);在鼠标输入和’path.data(‘hoverIn’,false);鼠标输出时,然后在!path.data(‘hoverIn’)的检查中包装任何.toFront()或违规变换,这样它只能发生一次,直到鼠标移出.或者,在toFront()或其他之后的某处存储对最近悬停路径的引用,然后不要toFront()或者如果此路径也是最近悬停的路径.