7

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

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

4

4 回答 4

12

自 Raphael 2.0.2 以来，Raphael 和 Internet Explorer（所有版本）中存在一个问题，其中对路径的各种操作（例如重置转换，.toFront()或在悬停时.toBack()调用）hover()可能导致悬停循环无限循环和/或悬停到被错过。

虽然hover大多数情况下在 IE 中对于 mouseout 都可以正常工作，但我发现有一些事情可能会使它出错，导致它 a) 像您描述的那样忽略 mouseouts 和 b) 递归触发 mouseover 事件，这样如果您放置一个控制台.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()或任何如果该路径也是最近悬停的路径。

于 2012-03-01T17:41:39.050 回答
4

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

于 2012-10-24T10:49:52.890 回答
2

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

于 2012-12-04T20:43:59.737 回答
1

如果您将矩形作为背景添加到（并包含）您尝试鼠标移出的对象下方，则可以通过向背景矩形添加另一个悬停事件处理程序来有效地获得鼠标移出效果。

于 2012-06-07T16:52:20.693 回答