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 /

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?

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/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?

• javascript
• jquery
• svg
• mouseevent
• raphael

Share Improve this question Follow edited Jan 3, 2012 at 20:30 puk 16.8k3131 gold badges126126 silver badges206206 bronze badges asked Jan 3, 2012 at 19:47 AndreiAndrei 4,21733 gold badges2929 silver badges3232 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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