按下鼠标按钮后，下面的代码会在每次鼠标移动时绘制一个矩形。当用户释放鼠标时，它应该停止绘制。
我想弄清楚如果用户在 Canvas 元素外释放鼠标，如何确保绘图停止。
我认为我可以通过在 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;<br/>
function on_load(e) {
var canvas = document.getElementById("canvas");<br/>
canvas.onmousedown = function (e) { drawing = true; };<br/>
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);
}
};<br/>
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>
最佳答案
- Why was my e.onmouseup never called?
e 是一个 Event 对象。它没有为 onmouseup 属性定义行为
2. Is my final solution the best way to do it?
是的，但有一些调整。首先，考虑您是否真的需要全局变量。没有全局变量也可以达到相同的效果，但出于调试目的将其保持为全局可能会有用。
其次，不需要您的无效代码。最好有一个始终存在的事件监听器，它只更改一个无害的变量，而不是为每个 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; };
}
关于javascript - 确保我每次按下鼠标都会得到一个鼠标弹起事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9264648/