Question

How can you tell if your cursor is over a certain element in Raphael.js?

if(mouse_is_over){
   //do this 
}
else{   
   //do this 
}

Ideally, I would like to test if the mouse if over a circle I named ‘c’.

Thanks!

Answer 1

I would strongly recommend using Raphael’s Element.data method to associate your private, circle-specific data with each item, and then acting on or against that data in a hover handler (manually detecting intersection with getElementByPoint may be expensive in a mouseover handler). You can store anything with data:

var circle = paper.circle( ... );
circle.data( 'name', "My name is Jonas." ); // store a string!
circle.data( 'dataset', { ... } );          // store an object literal!
circle.data( 'click_handler', function()
    {
        console.log("Store a handler function!" );
    } );

At this point, the game becomes very easy. Whether you use Raphael’s built in hover handling…

circle.hover( function()
    {
        console.log("Just moved over '" + this.data("name") + "'" );
    }, function()
    {
        console.log("Just moved out of '" + this.data("name") + "'" );
    } );

…or a mouseover event powered, for instance, by jQuery…

//  Don't forget to translate page coordinates relative to the paper!
var element = paper.getElementByPoint( x, y );
if ( element && element.data("name") == "c" )
{
    // bah, humbug
}

…the logic is the same. Simply query the application data you’ve associated with your elements and do your thing.

I happened to already have a terrible little script that animates circles at random locations, and I retrofitted it to accommodate your scenario.