1

私はjqueryが初めてで、マウスダウンイベントを処理するイベントを探しています。今、私は次のようなものを見つけて使用しています：

 $("#canva").live('mousedown mousemove mouseup', function(e){ ....

ただしfunction(e)、マウスがキャンバス要素の上にある場合でも発生します（左ボタンがクリックされているかどうかに関係なく）。

#canva要素の上の座標が変更されるたびに、マウスボタンがクリックされたときに発生するイベントを楽しみにしています。マウスの左ボタンを離すと、このイベントが終了します。

4

1 に答える 1

1

これを行う 1 つの方法は、グローバル変数を作成し、ユーザーが要素をクリックしたときにその値を変更することです。

var mouseIsDown = false;

$('#mycanvas').on('mousedown', function () {mouseIsDown = true});
$('#mycanvas').on('mouseup', function () {mouseIsDown = false});

あとは、起動したい関数に「mousemove」をバインドし、左クリックの状態をチェックして必要に応じてエスケープする条件を関数の本体に追加するだけです。

function fireThis(e) {
// if the user doesn't have the mouse down, then do nothing
if (mouseIsDown === false)
     return;

// if the user does have the mouse down, do the following
// enter code here
// ....
// ....
}

// bind mousemove to function
$('#mycanvas').on('mousemove', fireThis);

ここで、ユーザーが要素内をクリックし、マウスを離す前に要素の外にドラッグした場合、「mouseup」がトリガーされず、変数 mouseIsDown が false に戻されないことがわかります。これを回避するには、「mouseout」を mouseIsDown をリセットする関数にバインドするか、「mouseup」をグローバルにバインドします。

$('#mycanvas').on('mouseout', function () {mouseIsDown = false});

また

$(document).on('mouseup', function () {mouseIsDown = false});

例を次に示します: http://jsfiddle.net/pikappa/HVTWb/

于 2012-10-29T13:32:20.077 に答える