Question

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!

Answer 1

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 or mouseenter events.

Obviously mouseenter and mouseover 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.