Proper use of onmousemove_问答_开发者_运维开发者技术经验分享

I am trying to write some JavaScript that draws a line by dragging the mouse, and then removes it when you let go of left click.

<!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.s开发者_开发百科tart = Shift();
  document.getElementById('e').onmousemove = "mov()";
}

</script>
</head>
<body>
  <canvas id="e" onMouseDown="down()" onmousemove="" onMouseup="up()"></canvas>
</body>
</html>

This example does not work and throws no errors. If

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

is commented out and onmousemove is set to

onmousemove="mov()"

then it works, but obviously a line can only be drawn once. Also neither of the examples worked in FireFox. Tested in Chrome.

Change this:

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

To this:

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

You want to assign .onmousemove to a function reference, not to a string. Note that there are no parentheses: if you assign ...onmousemove = mov() it will run the mov() function and assign onmousemove to the return from the function (undefined, with this particular function). Without the parentheses it assigns it to the function itself.

use

document.getElementById('e').addEventListener('mousemove', mov, false);

document.getElementById('e').removeEventListener('mousemove', mov);

Made some fixes, but it is crazy code :)

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

You're assigning the function incorrectly

http://jsfiddle.net/wmTYr/

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

Proper use of onmousemove

精彩评论

关注公众号

热门标签

图文推荐

Proper use of onmousemove

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：