SVG：如何正确处理 mouseover 和 mouseout 事件？答案

【问题标题】：SVG : how to properly handle mouseover and mouseout event?SVG：如何正确处理 mouseover 和 mouseout 事件？
【发布时间】：2012-01-04 04:48:29
【问题描述】：

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

【问题讨论】：

标签： javascript jquery svg mouseevent raphael

【解决方案1】：

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

jsfiddle

还有一个和你类似的问题

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

【讨论】：