鼠标单击时画布鼠标事件问题

【问题标题】：Canvas mouse event issue on mouseclick鼠标单击时画布鼠标事件问题
【发布时间】：2014-05-29 22:27:42
【问题描述】：

尝试解决鼠标按下鼠标离开画布元素的问题；然后鼠标被释放（mouseup）离开画布元素，当鼠标移回画布元素时它认为鼠标仍然向下。

此示例中的修复是鼠标向上和鼠标向下来自文档而不是画布，但是 html5 滑块会影响画布元素的鼠标输入（定位）。

看这里； http://coy.cat/test/a10.htm

【问题讨论】：

在画布上使用 mousedown 但在文档上使用 mouseup。

标签： javascript jquery html canvas mouseevent

【解决方案1】：

将画布用于常规事件，但收听 window.onmouseup 而不是鼠标向上（在某些情况下，您也希望鼠标移动也可以使用此功能）。

当您在画布元素之外时，鼠标不会在画布元素上触发鼠标事件，而是在窗口下方和窗口上的元素触发（除非阻止事件冒泡）。

简单示例：

var isDown = false;  // mouse state

canvas.addEventListener('mousedown', function(e) {
    isDown = true;
    ...
}, false);

window.addEventListener('mouseup', function(e) {
    if (!isDown) return;
    if (e.preventDefault) e.preventDefault();
    isDown = false;
}, false);

【讨论】：