拉斐尔和 IE。鼠标悬停解决方法答案

【问题标题】：Raphael and IE. Mouseout workaround拉斐尔和 IE。鼠标悬停解决方法
【发布时间】：2011-11-27 20:21:51
【问题描述】：

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

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

【问题讨论】：

你有没有发现在这里做什么？我似乎无法解决 onmouseout 问题。
不幸的是我没有。当另一个对象触发鼠标悬停时，我被要求对所有其他对象执行“重置”以将它们恢复到正常状态。我的项目是一张带有标签的美国地图，鼠标悬停时会显示某些城市。这些城市中的每一个都是一个州的子级，并且必须继承 mouseover 属性才能否定先前的 mouseover 事件。这只是一团糟。不过，在其他浏览器中效果很好……祝你好运。如果您发现了什么，请更新此帖子。
我的也是美国地图。对于 IE，我最终添加了一个全局跟踪变量“current”，用于重置之前悬停的状态。当鼠标悬停在下一个状态时，onmouseover 方法首先重置前一个状态，然后用当前状态更新变量。这也让我可以通过从提供相同功能但没有地图的下载列表中选择一个状态来重置之前悬停的状态。
stackoverflow.com/questions/3908812/… 有一个很好的解决方案

标签： javascript internet-explorer raphael mouseover mouseout

【解决方案1】：

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

虽然hover 在 IE 中大多数情况下都可以正常使用鼠标移出，但我发现有几件事可能会导致它出错，导致它 a) 忽略你描述的鼠标移出和 b) 递归触发 mouseover 事件如果你把 console.log 放在那里，IE 开发者工具的控制台会中断并变成灰色......有时这似乎也会阻止它识别鼠标悬停。

以下是我遇到的导致此问题的原因：

重置转换，这将导致元素从鼠标下方移动，然后重新应用它，将元素放回光标下方。非 IE 像什么都没发生一样继续运行并且工作正常，IE 就像上面描述的那样吓坏了。
.toFront() 和 .toBack() - 非 IE 将移动的元素识别为位于相同 X Y 位置的相同元素，IE 会像上面描述的那样崩溃。

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

这里一个好的解决方法是在鼠标移出时使用某种标志，例如 'path.data('hoverIn', true);on mouse in and 'path.data( 'hoverIn', false );，然后包装任何.toFront() 或有问题的转换以检查!path.data( 'hoverIn' ) 这样它只能发生一次，直到鼠标移出发生。或者，在 toFront() 或其他位置之后的某处存储对最近悬停路径的引用，然后不要 toFront() 或如果此路径也是最近悬停的路径。

【讨论】：

快速信用 - jsfiddle 改编自对此相关问题的回答 stackoverflow.com/questions/3908812/…
感谢您的回答，您的 JSFiddle 提供了帮助。
+1。 .toFront() 为我在 IE8 上绊倒了鼠标。删除它解决了这个问题。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：