15

私はhtml5キャンバスで遊んでいて、問題に遭遇しました。

canvas.onmousedown = function(e){
        dragOffset.x = e.x - mainLayer.trans.x;
        dragOffset.y = e.y - mainLayer.trans.y;
        canvas.onmousemove = mouseMove;
}
canvas.onmouseup = function(e){
    canvas.onmousemove = null;
}

canvas.onmouseclick = mouseClick;

function mouseMove(e){
    mainLayer.trans.x = e.x - dragOffset.x;
    mainLayer.trans.y = e.y - dragOffset.y;
    return false;
}

function mouseClick(e){
    // click action
}

このコードでは、ドラッグ オフセットで移動することにより、マウス クリック + ドラッグでキャンバス ビューをパンします。しかし、クリックイベントもあります。現在、マウスをドラッグして離すと、onmouseup と onclick の両方が実行されます。

それらをユニークにするためのテクニックはありますか？

4

3 に答える 3

18

クリックイベントは、要素上でのマウスダウンとマウスアップが成功した後に発生します。マウスイベントの上にクリックを使用している特定の理由はありますか? mousedown/mouseupだけで問題ないはずです。クリックは、コーディングを少し節約できる便利なイベントです。

私は一般的に次のようにします：

var mouseIsDown = false;

canvas.onmousedown = function(e){
    dragOffset.x = e.x - mainLayer.trans.x;
    dragOffset.y = e.y - mainLayer.trans.y;

    mouseIsDown = true;
}
canvas.onmouseup = function(e){
    if(mouseIsDown) mouseClick(e);

    mouseIsDown = false;
}

canvas.onmousemove = function(e){
    if(!mouseIsDown) return;

    mainLayer.trans.x = e.x - dragOffset.x;
    mainLayer.trans.y = e.y - dragOffset.y;
    return false;
}

function mouseClick(e){
    // click action
}
于 2012-04-05T21:47:02.213 に答える
0

関数 mouse move で、移動が発生したことを示すブール値を設定し、すべてのコードを mouseup で囲み、if ステートメントでクリックして、ドラッグが発生しなかったことを確認します。これらの if ステートメントの後、関数の終了前に、ドラッグ ブール値を false に設定します。

于 2012-04-03T21:03:22.973 に答える
-1

clickStatus = 0;各関数チェックの開始時に やなどの変数を宣言して、正しい値を確認してください。

if (clickstatus == 0) {
     clickstatus =1;
     ...//function code
 };
于 2012-04-03T21:03:03.260 に答える