title: SVG : how to properly handle mouseover and mouseout event?
body: <p>I'm using Raphael js framework to create interactive svg image on client:   </p>
  
  <pre><code>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'})});
  </code></pre>
  
  <p>Please look at jsfiddle example <a href="http://jsfiddle.net/6BtUk/9/" rel="nofollow">http://jsfiddle.net/6BtUk/9/</a></p>
  
  <p>If the user moves the mouse over the text inside the <code>path</code> element, the <code>path</code> element will trigger <code>mouseout</code> event. How to prevent triggering of mouseout event on <code>path</code> element when user moves mouse to text element?</p>