拉斐尔和IE。鼠标悬停解决方法
我在 IE 浏览器上使用 Raphael 实现 SVG 效果时遇到了问题。当我将鼠标悬停在某个对象上时，动画会按预期发生。然而，在鼠标移出时，永远不会调用鼠标移出操作，因此对象停留在鼠标悬停状态。
我过去见过其他人抱怨这个问题，但我看到的唯一解决方案是强制每个对象上的鼠标悬停事件将所有 != 当前对象返回到正常状态。我宁愿不做一般的“重置所有内容”，因为我有很多对象，所以我想知道是否有人有可以建议的替代方案。我正在考虑将最后触发的鼠标悬停的最后一个对象存储在变量中，并且仅在每次鼠标悬停时重置该对象，这可以工作......
I've run into an issue using Raphael for SVG effects on an IE browser. When I mouseover an object, the animation occurs as expected. On mouseout, however, the mouseout action is never called, so the object(s) are stuck in their mouseover state.
I've seen others complain about this issue in the past, but the only solution I saw was to force the mouseover event on every object to return everything != current object to their normal state. I'd rather not do a general "reset everything" because I have quite a few objects, so I'm wondering if anyone has an alternative they can suggest. I was thinking about storing the last object with the last triggered mouseover in a variable and only resetting that on every mouseover, which could work....
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
自 Raphael 2.0.2 以来，Raphael 和 Internet Explorer（所有版本）中存在一个问题，即对路径的各种操作，例如重置转换、
.toFront()或.toBack( )在悬停时从hover()调用可能会导致悬停输入无限循环和/或错过悬停输出。虽然
hover在 IE 中的 mouseout 中大部分工作正常，但我发现有一些事情可能会出错，导致它 a) 忽略您所描述的 mouseouts 和 b) 触发 mouseover 事件递归地，如果您将 console.log 放在那里，IE 开发人员工具的控制台会中断并变成灰色......有时这似乎也会阻止它识别鼠标悬停。以下是我遇到的导致此问题的情况：
这个jsfiddle中有一些观察和演示（阅读并取消注释各种评论）。
这里一个很好的解决方法是使用某种标志，例如 'path.data( 'hoverIn', true );
on mouse in 和 'path.data( 'hoverIn', false );鼠标移出时，然后将任何.toFront()或有问题的转换包装在!path.data( 'hoverIn' )的检查中，以便它只能发生一次，直到发生鼠标移出的情况。或者，将对最近悬停路径的引用存储在 toFront() 或其他内容之后的某个位置，然后不要使用 toFront() 或其他内容（如果该路径也是最重要的路径）最近徘徊一个。Since Raphael 2.0.2, there's been an issue in Raphael and Internet Explorer (all versions) where various manipulations of a path such as resetting a transform,
.toFront(), or.toBack()called fromhover()while hovering can cause hover ins to loop endlessly and/or hover outs to be missed.While
hovermostly works fine in IE for mouseout, there are a few things I've found that that can trip it up, causing it to a) ignore mouseouts as you describe and b) trigger the mouseover event recursively such that if you put a console.log in there, IE developer tools' console breaks and turns grey... which sometimes seems to also stop it recognising mouseouts.Here are the things I've encountered which cause this:
There are some observations and demonstrations in this jsfiddle (read & uncomment the various comments).
A good workaround here, is to have some kind of flag like for example 'path.data( 'hoverIn', true );
on mouse in and 'path.data( 'hoverIn', false );on mouse out, then wrap any.toFront()or offending transforms in a check that!path.data( 'hoverIn' )so that it can only happen once until the mouse out happens. Or, store a reference to the most recently hovered path somewhere after thetoFront()or whatever, then don'ttoFront()or whatever if this path is also the most recently hovered one.我遇到了同样的问题（地图上的区域在悬停时改变了背景），而 IE9/Opera 中对我来说最重要的是 toFront() 方法。我删除了它并且工作正常。
I had the same problem (map with regions that changed background on hover) and the deal-braker in IE9/Opera for me was the toFront() method. I removed that and it works fine.
我通过将代码放入匿名函数中，然后通过事件处理程序内的
setTimeout调用它来解决此限制。I gone around this limitation by putting code inside anonymous function and then calling it via
setTimeoutinside event handler.如果您在尝试鼠标移出的对象下方添加一个矩形作为背景（并包含该对象），则可以通过向背景矩形添加另一个悬停事件处理程序来有效地获得鼠标移出效果。
If you add a rect as a background underneath (and containing) the object you are trying to mouseout of, you can effectively get a mouseout effect by adding another hover event handler to the background rect.