3

想象一下：

  • 2 个同心圆，较小的圆位于较大的圆上，以便两者都可见
  • 两者都添加到 Raphael 组（集）
  • 该组具有 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>

Javascript：

var W=200;
var H=200;
var paper=new Raphael(document.getElementById('target'),W,H);
var c1=paper.circle(W/2,H/2,70).attr({fill:'orange','stroke-width':4,stroke:'red',opacity:0.7});
var c2=paper.circle(W/2,H/2,50).attr({fill:'green','stroke-width':4,stroke:'yellow',opacity:0.7});
var group=paper.set();
group.push(c1,c2);

var count=0;

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

和CSS代码：

#target{width:200px;}

运行上面的代码并在此处查看结果：http: //jsbin.com/ivules/7。

控制台显示 IN 和 OUT 日志。
只需在两个圆圈的边界之间移动鼠标即可。

4

1 回答 1

0

对于您的 mouseout() 函数，请尝试：

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

当您将鼠标悬停在外圈上时，您将获得“IN”。当您将鼠标悬停在内圈上时，您将再次获得“IN”。当你完全离开这个圈子时，你最终会得到“OUT”。

如果“IN”太多，请尝试创建一个不可见的圆圈，将其放在当前 2 个圆圈的顶部，然后只将鼠标悬停事件添加到该圆圈。例如，尝试： c3=paper.circle(W/2,H/2,70).attr({fill:'orange','stroke-width':4,stroke:'red',opacity:0});

c3.mouseover(function()
{

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

});

c3.mouseout(function()
{

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

});
于 2013-02-14T20:35:30.247 回答