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。

是否有任何技术使它们独一无二？

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 
} 

Answer 2

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

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

Answer 3

在功能鼠标移动

设置一个布尔说，此举发生，encompase所有的代码在鼠标松开，然后单击使用if语句来检查没有发生的拖累。在这些if语句之后，在函数结束之前，将拖动布尔值设置为false。