javascript - SVG : how to properly handle mouseover and mouseout event?

Question

我正在使用 Raphael js 框架在客户端创建交互式 svg 图像:

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'})});

请看jsfiddle例子http://jsfiddle.net/6BtUk/9/

如果用户将鼠标移动到 path 元素内的文本上，path 元素将触发 mouseout 事件。当用户将鼠标移动到文本元素时，如何防止在 path 元素上触发 mouseout 事件？

Answer 1

我没有和 Raphael 合作过，但看起来你可以尝试使用 Set将标签和矩形分组并将事件处理程序附加到集合。

jsfiddle

还有一个问题和你的很相似

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