我正在尝试编写一些 JavaScript，通过拖动鼠标来绘制一条线，然后在您松开左键单击时将其删除。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
window.stop = false
window.canvas = document.getElementById("e");
window.context = canvas.getContext("2d");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
window.pos = Shift();
}
function Shift() {
e = window.event
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop;
+ document.documentElement.scrollTop;
}
posx -= document.getElementById('e').offsetLeft;
posy -= document.getElementById('e').offsetTop;
return[posx,posy];
}
function up(){
document.getElementById('e').onmousemove = null;
canvas.width = canvas.width;
}
function mov(){
canvas.width = canvas.width;
window.pos = Shift();
context.moveTo(window.start[0],window.start[1]);
context.lineTo(pos[0],pos[1]);
context.stroke();
}
function down(){
window.start = Shift();
document.getElementById('e').onmousemove = "mov()";
}
</script>
</head>
<body>
<canvas id="e" onMouseDown="down()" onmousemove="" onMouseup="up()"></canvas>
</body>
</html>
这个例子不起作用，也没有抛出任何错误。如果
document.getElementById('e').onmousemove = "mov()";
被注释掉并且 onmousemove 被设置为
onmousemove="mov()"
然后它起作用了，但显然一条线只能画一次。此外，这两个示例都无法在 FireFox 中运行。在 Chrome 中测试。
最佳答案
改变这个:
document.getElementById('e').onmousemove = "mov()";
对此:
document.getElementById('e').onmousemove = mov;
您想将 .onmousemove 分配给函数引用，而不是字符串。请注意没有括号:如果您分配 ...onmousemove = mov() 它将运行 mov() 函数并分配 onmousemove到函数的返回值(未定义，具有此特定函数)。如果没有括号，它会将其分配给函数本身。
关于javascript - 正确使用onmousemove，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7439420/