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

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,单击是一个方便的事件,可以节省一些编码.

我通常会这样做:

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
}