3

これを想像してみてください：

  • 2つの同心円。小さい方が大きい方の上にあり、両方が見えるようになっています。
  • 両方ともRaphaelグループに追加されます（セット）
  • グループには、mouseoutおよびmouseoverイベントハンドラーがあります

問題：
カーソルが1つの円から別の円に移動すると、両方のイベントハンドラーが、各円に個別に追加されたかのように起動します。

私が望んでいるのは、イベントが単一の形であるかのようにグループ全体で処理されることです。
どうすればそれを達成できますか？

これが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ログが表示されます。
2つの円の境界の間でマウスを動かすだけです。

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 に答える