1

私はSVGとRaphaelJSを使用しています。要素にカーソルを合わせると、最初の要素の上に2番目の要素が表示される状況があります。2番目の要素が表示されると、マウスは2番目の要素の上にあるため、mouseoutイベントが最初の要素で発生し、2番目の要素を非表示にします。これはループで続きます。最初の要素でマウスアウトが発生するのを防ぐ、または2番目の要素でホバーするのを防ぐにはどうすればよいですか？

他の例では、ちらつき効果を試してみました。これが私がRaphaelでやっていることの簡略版です...

window.onload = function () {
  var paper = Raphael("container", 1000, 900);
  var rect_one = paper.rect(30, 30, 150, 150).attr({fill:"#fff"});
  var rect_two = paper.rect(50, 50, 60, 60).attr({fill:"#fff"});

  rect_two.hide();

  rect_one.mouseover(function () {
    rect_two.show();
  });

  rect_one.mouseout(function () {
    rect_two.hide();
  });

};
4

2 に答える 2

0

私はあなたの解決策を再考し、次のアプローチを思いつきました...

onmouseoutイベント（マウスが状態名を含むテキストボックス上を移動することによってトリガーされるため、状態/名前領域上でマウスを動かすとちらつきが発生する）をトリガーしようとするのではなく、現在アクティブな状態を変数にキャッシュし、マウスを入力して、キャッシュされた状態がマウスオーバーしている状態と一致するかどうかをテストする方が効率的です。

添付のjsFiddle（独自のフォーク）と、そのスクリプトに含めたコメントを参照してください。

http://jsfiddle.net/XKt9U/8/

于 2012-09-28T16:47:44.703 に答える
0

Raphael 要素をセットに配置すると、問題を解決できます。

window.onload = function () {
  var paper = Raphael("container", 1000, 900);
  var group = paper.set()
  var rect_one = paper.rect(30, 30, 150, 150).attr({fill:"#fff"});
  var rect_two = paper.rect(50, 50, 60, 60).attr({fill:"#fff"});
  group.push(rect_one);
  group.push(rect_two);
  rect_two.hide();

  group.mouseover(function () {
    rect_two.show();
  });

  group.mouseout(function () {
    rect_two.hide();
  });

};​

http://jsfiddle.net/agdMG/

于 2012-09-22T01:23:54.087 に答える