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

Question

尝试解决鼠标离开带有mousedown的canvas元素的问题;然后将鼠标从canvas元素中释放（mouseup），当鼠标移回canvas元素时，它认为鼠标仍处于关闭状态。

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

见这里; http://coy.cat/test/a10.htm

Answer 1

使用画布进行常规事件，但是听一下window.onmouseup而不是鼠标（在某些情况下，你也希望将它用于mousemove）。

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

简单示例：

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);