确保我获得每个鼠标按下时的鼠标移动事件

下面的代码在按下鼠标按钮后每次移动鼠标时绘制一个矩形。当用户释放鼠标时，它应该停止绘图。确保我获得每个鼠标按下时的鼠标移动事件

我想弄清楚如果用户在画布元素之外释放鼠标，绘图将会停止。

我以为我可以通过这样的内部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

确保我获得每个鼠标按下时的鼠标移动事件

回答

相关问题