javascript - 在 Raphael 中为鼠标悬停事件添加锚点

Question

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

这是一个小提琴，可以更好地表达我的意思

Answer 1

这是一个有效的 jsfiddle，使用下面的最后一个示例。

纯粹用拉斐尔来做这件事，会很复杂。这是基本思想：

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

Raphael 中的另一种选择是在链接和背景上绘制一个透明框，并使用它来触发鼠标事件——包括点击；这将大大降低复杂性。

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

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

在这方面更进一步，在拉斐尔身上真的没有理由去处理这个问题。只需使用 Raphael 来创建和管理背景图像，其余的留在 jQuery 或您喜欢的库中。