SVG：如何正确处理 mouseover 和 mouseout 事件？
我正在使用 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 事件？
I'm using Raphael js framework to create interactive svg image on 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'})});
Please look at jsfiddle example http://jsfiddle.net/6BtUk/9/
If the user moves the mouse over the text inside the path element, the path element will trigger mouseout event. How to prevent triggering of mouseout event on path element when user moves mouse to text element?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我没有与 Raphael 合作过，但看起来您可以尝试使用 Set 对标签进行分组和矩形并将事件处理程序附加到该集合。
jsfiddle
这是另一个与您的问题类似的问题
Raphael JS：mouseover/mouseout - 文本标签问题
I haven't worked with Raphael but it looks like you can try using Set to group your label and the rectangle and attach the event handler to the set.
jsfiddle
Here is another question that is similar to yours
Raphael JS : mouseover/mouseout - problem with text-labels