鼠標點擊畫布上的鼠標事件問題

Question

試圖解決鼠標離開畫布元素時出現問題的問題;然後鼠標被釋放（mouseup）關閉畫布元素，當鼠標移回到畫布元素時，它認爲鼠標仍然關閉。

在這個例子中的修復是鼠標向上和鼠標向下是從文檔而不是畫布，但然後HTML5滑塊一些如何影響畫布元素鼠標輸入（定位）。

請看這裏; http://coy.cat/test/a10.htm

Answer 1

使用畫布進行定期事件，但聽取window.onmouseup而不是鼠標（在某些情況下，您希望這也適用於mousemove）。

當您在畫布元素之外時，鼠標不會觸發畫布元素上的鼠標事件，但會觸發下方和窗口上的元素（除非事件不會冒泡）。

簡單的例子：在畫布上

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