2

我在检测 SVG 路径元素上的鼠标悬停事件时遇到问题。似乎路径元素的 strokeWidth 越小，检测鼠标悬停的成功率就越低。

另外，我正在使用 jquery-svg 插件进行绘图。

下面是尝试在路径元素上使用 jquery mouseover 事件进行检测的小提琴。 鼠标悬停小提琴

下面是尝试通过将 mousemove 侦听器附加到 svg，然后使用 document.getElementFromPoint 来检测的小提琴。 getElementFromPoint 小提琴

这些似乎都不能可靠地工作，尤其是在鼠标快速移动的情况下。是否可以使这些中的任何一个更敏感以更好地检测鼠标悬停？或者也许是更好的方法？

4

1 回答 1

2

浏览器的工作方式，您不会mouseover连续获得事件，但每次操作系统更新光标位置时您都会获得一个。如果鼠标移动得很快，你会得到一个相隔几个像素的事件。鼠标不会在文档上滑动，它会跳转。这是一个显示每个事件发生位置的 jsfiddle 。您无法mouseover为光标的两个连续位置之间的所有元素获取事件。

您可以做一些不同的事情：记住mousemove事件的先前位置，计算该点与当前鼠标位置之间的线，并计算该线与文档中所有其他形状之间的所有交点。但这将是资源密集型的，因为没有可用的 API，您必须自己计算交叉点。有一个图书馆可以帮助你。

于 2012-08-30T20:01:19.387 回答