SVG: how to handle the mouseover and mouseout event correctly?

Question

I use the Raphael framework to create an interactive svg image on the 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'})}); 

See the jsfiddle example http://jsfiddle.net/6BtUk/9/

If the user moves the mouse over the text inside the path element, the path element raises the mouseout event. How to prevent the mouseout event from firing in the path element when the user moves the mouse into the text element?

Answer 1

I have not worked with Raphael, but it looks like you can try Set to group the label and rectangle and attach the event handler to the set.

jsfiddle

Here is another question similar to yours

Raphael JS: mouseover / mouseout - problem with text labels