HTML5画布：如何处理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。

有没有什么技巧可以使它们各自独立？

- AlexCheuk

---

看这个！ https://dev59.com/E1rUa4cB1Zd3GeqPmrk1#11027438 - Munkhtsogt

Answer 1

click事件指的是在元素上成功触发mousedown和mouseup之后发生的事件。你在鼠标事件上使用click是否有特殊原因呢？你只需要使用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
}

- Colin Godsey

Answer 2

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

- awiebe

Answer 3

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

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

- RyanS