SVG : how to properly handle mouseover and mouseout event?

Question

I'm using Raphael js framework to create interactive svg image on client:

var paper = Raphael(document.getElementById("svgcontainer"));
var path = paper.path("M0,0 L150,0 L150,150, L0,150 Z");

path.attr({fill: 'red'});

var text = paper.text(40,20, "some text");

path.mouseover(function(){this.attr({fill: 'green'})});
path.mouseout(function(){this.attr({fill: 'red'})});

Please look at jsfiddle example http://jsfiddle.net/6BtUk/9/

If the user moves the mouse over the text inside the path element, the path element will trigger mouseout event. How to prevent triggering of mouseout event on path element when user moves mouse to text element?

Answer 1

I haven't worked with Raphael but it looks like you can try using Set to group your label and the rectangle and attach the event handler to the set.

jsfiddle

Here is another question that is similar to yours

Raphael JS : mouseover/mouseout - problem with text-labels