确保每次鼠标按下时都会收到鼠标按下事件

发布于 2025-01-05 06:56:37 字数 1531 浏览 4 评论 0原文

下面的代码在按下鼠标按钮后每次鼠标移动时都会绘制一个矩形。当用户释放鼠标时，它应该停止绘制。

我试图弄清楚如果用户在画布元素之外释放鼠标，如何确保绘图停止。

我认为我可以通过在 onmousedown 内的事件上设置 onmouseup 事件处理程序来实现此目的，如下所示： <代码>

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

but it did not work because e.onmouseup is never called. So I ended up setting window.onmouseup instead.

问题：

为什么我的 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>

原文

The code below draws a rectangle on every mouse move after the mouse button is pressed. When the user releases the mouse it should stop drawing.

I am trying to figure out how to make sure that drawing stops if the user releases the mouse outside the canvas element.

I thought that I could accomplish this by setting onmouseup event handler on my event inside onmousedown like this:

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

but it did not work because e.onmouseup is never called. So I ended up setting window.onmouseup instead.

Questions:

why was my e.onmouseup never called?
is my final solution the best way to do it?

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

欢你一世 2025-01-12 06:56:37

为什么我的 e.onmouseup 从未被调用？

e 是一个 Event 对象。它没有为 onmouseup 属性定义行为

2.我的最终解决方案是最好的方法吗？

是的，但有一些调整。首先，考虑您是否真的需要全局变量。无需全局变量也可以实现相同的效果，但出于调试目的将其保持为全局可能有用。

其次，不需要您的不工作代码。最好拥有一个始终存在的事件侦听器，该侦听器仅更改无害的变量，而不是为每个 mouseup 事件构造一个新的事件侦听器。此外，在您的“想要的”代码中，之前的 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; };
}

Why was my e.onmouseup never called?

e is an Event object. It doesn't have a defined behaviour for an onmouseup property

2. Is my final solution the best way to do it?

Yes, but with some adjustments. First, consider if you really need the global variable. The same effect can be achieved without the global variable, but it might useful to keep it global for debugging purposes.

Second, your not-working code is not needed. It's better to have one always-existing event listener which only changes a harmless variable, than constructing a new event listener for each mouseup event. Besides, in your "wanted" code, the previous mouseup event is never explicitly removed.

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

回复收藏 0 原文