Canvas HTML5: Cómo manejar mousedown mouseup mouseclick

Question

He estado jugando con el lienzo html5 y me encontré con un problema.

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 
} 

En este código, hago mis clic del ratón + arrastrar cacerola la vista ampliada mediante la traducción por el arrastre de desplazamiento. Pero también tengo un evento de clic. En este momento, cada vez que arrastro mi mouse y lo dejo ir, ejecuta tanto onmouseup como onclick.

¿Hay alguna técnica para hacerlas únicas?

Answer 1

Un clic evento ocurre después de una exitosa mousedown y mouseup sobre un elemento. ¿Hay algún motivo en particular por el que esté utilizando , haga clic en en la parte superior de los eventos del mouse? Usted debe estar bien con solo mousedown/mouseup, haga clic en es un evento de conveniencia que le ahorra un poco de codificación.

por lo general sería hacerlo de esta manera:

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

Intente declarar una variable como clickStatus = 0; y al comienzo de cada función, verifique para asegurar el valor correcto.

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

Answer 3

en el movimiento función de ratón establece un valor lógico decir que se produjo un movimiento, encompase todo el código en mouseup y hacer clic con una sentencia if para comprobar que un lastre no se produjo. Después de estas instrucciones if y antes del final de las funciones, establezca el booleano de arrastre en falso.