javascript - HTML5 Canvas : How to handle 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 View 。但我也有一个点击事件。现在，每当我拖动鼠标并放开鼠标时，它都会同时运行 onmouseup 和 onclick。

有没有什么技巧可以使它们独一无二？

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
}