Javascript 正确使用onmousemove_Javascript_Javascript Events

Javascript 正确使用onmousemove

javascript

Javascript 正确使用onmousemove,javascript,javascript-events,Javascript,Javascript Events,我正试图编写一些javascript，通过拖动鼠标画一条线，然后在你放开鼠标左键时将其删除 <!DOCTYPE html> <html> <head> <script type="text/javascript"> window.onload = function() { window.stop = false window.canvas = document.getElementById("e"); window.context =

我正试图编写一些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>

注释掉，并且onmousemove设置为

onmousemove="mov()"

然后它就起作用了，但很明显，一条线只能画一次。而且这两个例子在FireFox中都不起作用。在铬中测试。

更改此选项：

document.getElementById('e').onmousemove = "mov()";

为此：

document.getElementById('e').onmousemove = mov;

您希望将

.onmousemove

分配给函数引用，而不是字符串。请注意，没有括号：如果分配

…onmousemove=mov（）

，它将运行

mov（）

函数，并将

onmousemove

分配给函数返回的值（未定义，使用此特定函数）。如果没有括号，它会将其分配给函数本身。

您分配的函数不正确

hi
函数go（）{
警惕（）；
}
document.getElementById（“meh”）.onmouseover=go

使用

做了一些修复，但这是疯狂的代码：）


window.onload=函数（）{
window.stop=false
window.canvas=document.getElementById（“e”）；
window.context=canvas.getContext（“2d”）；
canvas.width=document.documentElement.clientWidth；
canvas.height=document.documentElement.clientHeight；
}
功能转换（e）{
var-posx=0；
var-posy=0；
如果（！e）var e=window.event；
如果（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；
返回[posx，posy]；
}
函数up（）{
document.getElementById（'e'）。removeEventListener（'mousemove'，mov）；
canvas.width=canvas.width；
}
函数mov（e）{
canvas.width=canvas.width；
window.pos=移位（e）；
moveTo（window.start[0]，window.start[1]）；
context.lineTo（位置[0]，位置[1]）；
stroke（）；
}
功能下降（e）{
window.start=Shift（e）；
document.getElementById（'e'）。addEventListener（'mousemove'，mov，false）；
}

document.getElementById('e').onmousemove = mov;

<div id="meh">hi</div>
<script>
function go() {
    alert();
}
document.getElementById("meh").onmouseover = go
</script>

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>