HTML5 Canvas：如何處理mousedown mouseup mouseclick

Question

我一直在玩 html5 canvas 並遇到了問題。

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
}

在此代碼中，我通過按拖動偏移進行平移，使我的鼠標單擊並拖動平移 canvas 視圖。 但我也有一個點擊事件。 現在，每當我拖動鼠標並讓 go 運行時，它都會同時運行 onmouseup 和 onclick。

有沒有什么技巧可以使它們獨一無二？

Answer 1

單擊事件發生在元素上成功的mousedown和mouseup之后。 您使用鼠標事件頂部的單擊有什么特別的原因嗎？ 您應該只使用mousedown/mouseup就可以了， click是一個方便的事件，可以為您節省一些編碼。

我通常會這樣做：

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
}

Answer 2

在 function 鼠標移動中設置一個 boolean 表示發生了移動，將所有代碼包含在 mouseup 中並使用 if 語句單擊以檢查是否沒有發生拖動。 在這些 if 語句之后和函數結束之前，將拖動 boolean 設置為 false。

Answer 3

嘗試聲明一個變量，例如clickStatus = 0; 並在每個 function 開始檢查以確保正確的值。

if (clickstatus == 0) {
     clickstatus =1;
     ...//function code
 };