正确使用onmousemove
正确使用onmousemove
提问于 2011-09-16 10:03:34
我正在尝试编写一些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上测试过。
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-09-16 10:09:59
更改此设置：
document.getElementById('e').onmousemove = "mov()"; 要这样做：
document.getElementById('e').onmousemove = mov;您希望将.onmousemove分配给函数引用，而不是字符串。注意，这里没有括号:如果赋值为...onmousemove = mov()，它将运行mov()函数，并将onmousemove赋值给函数的返回值(对于这个特定的函数，未定义)。如果没有括号，它会将其赋值给函数本身。
Stack Overflow用户
发布于 2011-09-16 10:15:24
使用
document.getElementById('e').addEventListener('mousemove', mov, false);
document.getElementById('e').removeEventListener('mousemove', mov);做了一些修复，但这是疯狂的代码:)
<!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;
}
function Shift(e) {
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').removeEventListener('mousemove', mov);
canvas.width = canvas.width;
}
function mov(e){
canvas.width = canvas.width;
window.pos = Shift(e);
context.moveTo(window.start[0],window.start[1]);
context.lineTo(pos[0],pos[1]);
context.stroke();
}
function down(e){
window.start = Shift(e);
document.getElementById('e').addEventListener('mousemove', mov, false);
}
</script>
</head>
<body>
<canvas id="e" onMouseDown="down()" onmousemove="" onMouseup="up()"></canvas>
</body>
</html>Stack Overflow用户
发布于 2011-09-16 10:10:06
您分配的函数不正确
http://jsfiddle.net/wmTYr/
<div id="meh">hi</div>
<script>
function go() {
alert();
}
document.getElementById("meh").onmouseover = go
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7439420
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号