SVG:如何正确处理mouseover和mouseout事件?

时间:2012-01-03 19:47:03

标签: javascript jquery svg mouseevent raphael

我正在使用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事件?

1 个答案:

答案 0 :(得分:4)

我没有与Raphael合作,但看起来您可以尝试使用Set对标签和矩形进行分组,并将事件处理程序附加到集合中。

jsfiddle

这是另一个类似于你的问题

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