SVG形状添加到Raphael group fire事件中，就像是单独的一样_Svg_Mouseevent_Raphael

SVG形状添加到Raphael group fire事件中，就像是单独的一样

svg

SVG形状添加到Raphael group fire事件中，就像是单独的一样,svg,mouseevent,raphael,Svg,Mouseevent,Raphael,想象一下： 2个同心圆，较小的圆在较大的圆上，因此两者都是可见的两者都添加到拉斐尔组（集合）该组具有mouseout和mouseover事件处理程序问题：当光标从一个圆圈移动到另一个圆圈时，两个事件处理程序都会启动，就像它们分别添加到每个圆圈一样我想要的是将整个组的事件当作单个形状来处理。我怎样才能做到这一点以下是html代码： <!DOCTYPE html> <html> <head> <script src="http://cdn

想象一下：

2个同心圆，较小的圆在较大的圆上，因此两者都是可见的
两者都添加到拉斐尔组（集合）
该组具有mouseout和mouseover事件处理程序

问题：
当光标从一个圆圈移动到另一个圆圈时，两个事件处理程序都会启动，就像它们分别添加到每个圆圈一样

我想要的是将整个组的事件当作单个形状来处理。
我怎样才能做到这一点

以下是html代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.0/raphael-min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="target"></div>
</body>
</html>

和CSS代码：

#target{width:200px;}

运行上述代码并在此处查看结果：

控制台显示输入和输出日志。
只需在两个圆的边界之间移动鼠标。

对于mouseout（）函数，请尝试：

group.mouseout(function()
{
  this.mouseout(function(){
    console.log('OUT',++count);
  });
});

当你在外圆上盘旋时，你将进入。当你将鼠标悬停在内圈时，你将再次“进入”。当你完全离开圆圈时，你最终会得到“出去”

如果“IN”太多，请尝试创建一个不可见的圆，将其放置在当前2个圆的上方，并仅将鼠标悬停事件添加到该圆中。例如，尝试：

c3=paper.circle（W/2，H/2,70）.attr（{fill:'orange'，'stroke-width'：4，stroke:'red'，不透明性：0}）
group.mouseout(function()
{
  this.mouseout(function(){
    console.log('OUT',++count);
  });
});

c3.mouseover(function()
{

    console.log('IN',++count);

});

c3.mouseout(function()
{

    console.log('OUT',++count);

});