想象一下:
- 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 日志。
只需在两个圆圈的边界之间移动鼠标即可。