0

RaphaelJS が mousedown/mousemove/mouseup イベントに反応しないが、.click() で正常に動作するという問題に遭遇しました。

このhttp://jsfiddle.net/JMu7Z/2/を作成して、私が何を意味するかを示しました。

JS コード:

var containerDivs = document.getElementsByClassName('container');
var overlayDiv = null;
for(var k=0;k<containerDivs[0].childNodes.length;k++)
{
    if (containerDivs[0].childNodes[k].className.indexOf("holder") !== -1)
        overlayDiv = containerDivs[0].childNodes[k];
}
var canvas  = Raphael(overlayDiv,208,270);
var bgr = canvas.rect(10,10, canvas.width-10, canvas.height-10).attr({fill: "0xFF0000", stroke: "none", opacity:"0.2"});

bgr.mousedown( function(e) { alert ("down"); }); //doesn't work
bgr.click( function(e) { alert ("click"); }); // works

HTML:

<div class="container" style="position: relative; left: 0; top: 0;"><img class="corePic nonselectable" style="position:relative; top: 0; left: 0;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Tesla3.jpg/220px-Tesla3.jpg" alt="2_3"><div class="holder nonselectable" style="position:absolute; top:0px; left:0px;" onselectstart="return false;"></div></div>

どんな助けでも大歓迎です。

4

1 に答える 1

0

あなたの例に基づいて提供したDEMOを見てください。

//bgr.click(function(){this.attr({stroke:'orange',"stroke-width":5,opacity:0.5});
bgr.mousedown(function() 
{
    this.attr({stroke:'red',"stroke-width":5,opacity:0.5}); 
});
bgr.mouseup(function() 
{
    this.attr({stroke:'blue',"stroke-width":5,opacity:0.5}); 
});
//bgr.mousemove(function(){this.attr({stroke:'green',"stroke-width":5,opacity:0.5});

同時に使用できないリスナーがあることに注意してください。

例えば：

  • clickmousedownイベントを同じオブジェクトで一緒に使用しないでください。なんで？mosedownマウスボタンを押すとすぐにイベントがトリガーされるためです。一方、click違います。DEMO を見る場合は、すべてをコメントして、コメントを外してclickください。マウス ボタンを押したままにすると、ボタンを離すまで何も起こりません。そのため、同じオブジェクトに両方のイベントがある場合、mousedownが最初にトリガーされ、click.
  • mouseupまたmousemove、前のポイントと同様に動作します。mousemoveすぐにトリガーし、「mouseup」イベントを引き継ぎます。mousemoveそのため、両方のイベントが実装されているオブジェクトのイベント のみを表示できます。

さらに、mousemove本当に迷惑です。あなたがそれを持っているとき、それはあなたclickに、、、mousedownまたはmouseupイベントが起こらないようにすることさえできません. 3つのケースすべてで、マウスが要素の上にある間ずっとトリガーされ、そのままになります。

これが少し役に立てば幸いです。

于 2013-08-03T23:33:56.153 に答える