確保我獲得每個鼠標按下時的鼠標移動事件

下面的代碼在按下鼠標按鈕後每次移動鼠標時繪製一個矩形。當用戶釋放鼠標時，它應該停止繪圖。確保我獲得每個鼠標按下時的鼠標移動事件

我想弄清楚如果用戶在畫布元素之外釋放鼠標，繪圖將會停止。

我以爲我可以通過這樣的內部onmousedown在我的事件設置onmouseup事件處理程序做到這一點：

 
canvas.onmousedown = function (e) { 
    drawing = true; 
    e.onmouseup = function (v) { drawing = false; } 
};

，但它沒有工作，因爲 e.onmouseup永遠不會被調用。所以我最終設置了 window.onmouseup。

問題：

爲什麼我e.onmouseup從未叫什麼名字？
是我最終的解決方案嗎？

 
<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <script type="text/javascript"> 
     drawing = false;
 
     function on_load(e) { 
     var canvas = document.getElementById("canvas");
 
     canvas.onmousedown = function (e) { drawing = true; };
 
     canvas.onmousemove = function (e) { 
      if (drawing) 
      { 
      var x = e.pageX - canvas.offsetLeft; 
      var y = e.pageY - canvas.offsetTop; 
      var context = canvas.getContext("2d"); 
      context.strokeRect(x, y, 10, 10); 
      } 
     };
 
     window.onmouseup = function (e) { drawing = false; }; 
     } 
    </script> 
    </head> 
    <body onload="on_load()"> 
    <canvas id="canvas" width="500" height="500" style="border: 1px solid black;"> 
    </canvas> 
    </body> 
</html>

來源

2012-02-13 akonsu

爲什麼我的e.onmouseup從不叫？

e是Event對象。它沒有onmouseup屬性的定義行爲

2.我的最終解決方案是否是最好的方法？

是的，但有一些調整。首先，考慮你是否真的需要全局變量。如果沒有全局變量，也可以實現相同的效果，但爲了進行調試，將其保持爲全局可能很有用。

其次，您不需要工作的代碼。最好有一個始終存在的事件偵聽器，它只改變無害的變量，而不是爲每個事件構造一個新的事件偵聽器。此外，在您的「想要」代碼中，以前的mouseup事件從未明確刪除。

function on_load(e) { 
    var drawing = false; // <-- Always declare variables 
    var canvas = document.getElementById("canvas"); 
    canvas.onmousedown = function (e) { drawing = true; }; 
    canvas.onmousemove = function (e) { 
     if (drawing) { 
     var x = e.pageX - canvas.offsetLeft; 
     var y = e.pageY - canvas.offsetTop; 
     var context = canvas.getContext("2d"); 
     context.strokeRect(x, y, 10, 10); 
     } 
    }; 
    window.onmouseup = function (e) { drawing = false; }; 
}

來源

2012-02-13 17:09:15

你可能要考慮一個onmouseout處理程序停止當鼠標離開你的元素繪製。

來源

2012-02-13 17:07:56 nolegs

操作系統如何保證任何類似於平衡鼠標在某些小部件中向下/向上的操作。那麼如果你在OS /瀏覽器'X'上工作，你怎麼知道OS /瀏覽器'我'或OS /瀏覽器'W'都將以相同的方式工作？有很多原因需要你去做別的事情，比如計時器。與你想要做的事情相比，定時器的開銷可能很小。

來源

2012-02-13 17:12:11

確保我獲得每個鼠標按下時的鼠標移動事件

回答

相關問題