javascript - HTML5 Canvas：如何处理 mousedown mouseup mouseclick

Question

我一直在玩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。

有什么技术可以使它们独一无二吗？

Answer 1

在元素上成功执行mousedown和mouseup后会发生单击事件。您在鼠标事件顶部使用单击是否有任何特殊原因？只需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
}

Answer 2

在函数 mouse move 中设置一个布尔值来表示发生了移动，将所有代码包含在 mouseup 中并使用 if 语句单击以检查是否没有发生拖动。在这些 if 语句之后和函数结束之前，将拖动布尔值设置为 false。

Answer 3

clickStatus = 0;尝试在每个函数检查开始时声明一个变量，例如和，以确保正确的值。

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