правильное использование onmousemove - PullRequest
Новая
       0

правильное использование onmousemove

1 голос
/ 16 сентября 2011

Я пытаюсь написать некоторый 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 ]

2 голосов
/ 16 сентября 2011

Измените это: 

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

На это: 

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

Вы хотите присвоить .onmousemove ссылку на функцию, а не строку.Обратите внимание, что круглых скобок нет: если вы назначите ...onmousemove = mov(), он запустит функцию mov() и присвоит onmousemove возврату из функции (не определено, с этой конкретной функцией).Без скобок он назначает ее самой функции.

1 голос
/ 16 сентября 2011

use 

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>
0 голосов
/ 16 сентября 2011

Вы неправильно назначаете функцию

http://jsfiddle.net/wmTYr/

<div id="meh">hi</div>
<script>
function go() {
    alert();
}
document.getElementById("meh").onmouseover = go
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...