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
 };