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

尝试声明clickStatus = 0;之类的变量，并在每个函数检查开始时确保正确的值。

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

Answer 3

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

HTML5 Canvas：如何处理mousedown mouseup鼠标点击

3 个答案: