HTML5 Canvas : How to handle mousedown mouseup mouseclick

canvas, html, javascript

Solution

A click event happens after a successful mousedown and mouseup on an element. Is there any particular reason you are using click on top of the mouse events? You should be fine with just mousedown/mouseup, click is a convenience event that saves you a little bit of coding.

I would generally do it this way:

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
}

Problem

I been playing around with html5 canvas and ran into a problem. ``` 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 } ``` In this code, I make my mouse click+drag pan the canvas view by translating by the drag offset. But I also have a click event. Right now, whenever I drag my mouse and let go, it runs both onmouseup AND onclick. Are there any techniques to make them unique?

Original source

Related problems