HTML5 Canvas : 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에 후 발생합니다. 특별한 이유가 있습니까 마우스 이벤트 위에 클릭하십시오? 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 문 다음과 함수 끝 이전에 끌기 부울을 false로 설정합니다.