在Raphael中添加锚到mouseover事件

Question

我正在尝试为Raphael中的mouseover事件添加一个锚点，以便在它悬停时不触发mouseout，

这里有一个fiddle来更好地展示我的意思

Answer 1

Here is a working jsfiddle, using the last example below.

要完全与拉斐尔一起做，这将是复杂的。这是基本的想法：

• 在mouseout事件中，使用Element.isPointInside()确定鼠标输出是由链接触发还是离开框
• 你可以使用event.target;事件被传递到mouseout回调
• 如果它是由链接触发的，那么只需忽略鼠标输出（当它离开实际的盒子时你会得到另一个）
• 在mousein事件中，请确保只有来自框外的触发器才会触发（当用户从​​链接返回时，您将获得另一个鼠标事件）

拉斐尔的另一个选择是在链接和背景上绘制一个透明框，然后用它来触发鼠标事件 - 包括点击;这将大大降低复杂性。

如果你想作弊，而不是重新发明任何轮子，你可以使用现有的解决方案并将其整合到Raphael的代码中。例如，您可以使用jQuery来触发事件，如下所示：

jQuery('#button').on('mouseenter', function() { xxd.stop().animate(...) }
jQuery('#button').on('mouseleave', function() { xxd.stop().animate(...) }

在这方面又向前迈进了一步，拉斐尔真的没有理由这样做。只需使用Raphael创建和管理背景图像，剩下的就放在jQuery或你最喜欢的lib中。