Raphael - 鼠标靠近元素时的事件
我想制作一个鼠标事件,当鼠标靠近拉斐尔元素时触发。 (所以我想我需要知道鼠标的 x,y 位置。关于如何实现这一点有什么想法吗?
谢谢!
I would like to make a mouse event that triggers when the mouse is near a Raphael element. (So I guess I would need to know the x,y position of the mouse. Any ideas on how this might be possible?
Thank you!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
正如您在问题中所建议的那样,您可以跟踪鼠标位置并将其与元素的位置进行比较。
但这样做是很困难的。
利用
mouseover
或mouseenter
事件要容易得多。显然,
mouseenter
和mouseover
仅在鼠标指针实际经过元素时触发,而不是按照问题仅在元素附近触发,但这可以通过添加不可见的方法轻松解决元素周围的区域,并在其上触发鼠标事件。这个不可见区域可以是与 Raphael 元素位于同一位置的另一个元素,但在每个方向上超出它一定的距离,或者它甚至可以是同一个 Raphael 对象,只是将其放大一点并且不绘制一直到边缘。
希望有帮助。
You could, as you suggest in the question, track the mouse position and compare it with the position of the element.
But that's doing things the hard way.
Far easier would be to exploit the
mouseover
ormouseenter
events.Obviously
mouseenter
andmouseover
are only triggered when the mouse pointer actually goes over the element, rather than merely near it as per the question, but this is easily resolved by adding an invisible area around the element, and having the mouse event trigger on that.This invisible area could be another element positioned in the same place as the Raphael element, but extending beyond it in each direction by a certain distance, or it could even be the same Raphael object, just make it a bit bigger and don't draw all the way to the edge.
Hope that helps.
另一个想法是使用非常宽的透明笔触来扩展“可悬停”区域,假设您可以只使用填充。只是一个想法。
Another idea is to use a very wide, transparent stroke to extend the 'hoverable' area, assuming you can make do with just the fill. Just an idea.