Javascript HTML5 Canvas：如何处理 mousedown mouseup mouseclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10001283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Canvas : How to handle mousedown mouseup mouseclick
提问by AlexCheuk
I been playing around with html5 canvas and ran into a problem.
我一直在玩 html5 canvas 并遇到了问题。
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.
在此代码中，我通过按拖动偏移进行平移，使鼠标单击+拖动平移画布视图。但我也有一个点击事件。现在，每当我拖动鼠标并松开时，它都会同时运行 onmouseup 和 onclick。
Are there any techniques to make them unique?
有什么技术可以使它们独一无二吗？
回答by Colin Godsey
A clickevent happens after a successful mousedownand mouseupon an element. Is there any particular reason you are using clickon top of the mouse events? You should be fine with just mousedown/mouseup, clickis a convenience event that saves you a little bit of coding.
一点击成功后，事件发生鼠标按下和鼠标松开一个元素。您在鼠标事件顶部使用单击有什么特殊原因吗？你应该只用mousedown/mouseup 就可以了，click是一个方便的事件，可以节省你一点编码。
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
}
回答by RyanS
Try declaring a variable such as clickStatus = 0;and at the start of each function check to ensure the correct value.
尝试clickStatus = 0;在每个函数检查开始时声明一个变量，例如和 以确保正确的值。
if (clickstatus == 0) {
clickstatus =1;
...//function code
};
回答by awiebe
in the function mouse move set a boolean to say that a move occured, encompase all the code in mouseup and click with an if statement to check that a drag did not occur. After these if statements and before the end of the functions set the dragging boolean to false.
在函数 mouse move 中设置一个布尔值来表示发生了移动，包含 mouseup 中的所有代码并使用 if 语句单击以检查未发生拖动。在这些 if 语句之后和函数结束之前，将拖动布尔值设置为 false。
