убедившись, что я получаю событие для мыши для каждой мыши

Приведенный ниже код рисует прямоугольник на каждом перемещении мыши после нажатия кнопки мыши. Когда пользователь отпускает мышь, он должен прекратить рисование.убедившись, что я получаю событие для мыши для каждой мыши

Я пытаюсь выяснить, как убедиться, что рисование остановится, если пользователь освобождает мышь за пределами элемента холста.

Я думал, что я мог бы сделать это, установив обработчик события onmouseup на моем случае внутри onmousedown так:

 
canvas.onmousedown = function (e) { 
    drawing = true; 
    e.onmouseup = function (v) { drawing = false; } 
};

, но это не сработало, потому что e.onmouseup никогда не вызывается. Таким образом, я в конечном итоге установил window.onmouseup.

Вопросы:

почему был мой e.onmouseup никогда не называли?
Мое окончательное решение - лучший способ сделать это?

 
<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <script type="text/javascript"> 
     drawing = false;
 
     function on_load(e) { 
     var canvas = document.getElementById("canvas");
 
     canvas.onmousedown = function (e) { drawing = true; };
 
     canvas.onmousemove = function (e) { 
      if (drawing) 
      { 
      var x = e.pageX - canvas.offsetLeft; 
      var y = e.pageY - canvas.offsetTop; 
      var context = canvas.getContext("2d"); 
      context.strokeRect(x, y, 10, 10); 
      } 
     };
 
     window.onmouseup = function (e) { drawing = false; }; 
     } 
    </script> 
    </head> 
    <body onload="on_load()"> 
    <canvas id="canvas" width="500" height="500" style="border: 1px solid black;"> 
    </canvas> 
    </body> 
</html>

источник

2012-02-13 akonsu

Почему мой e.onmouseup никогда не звонил?

e является Event объектом. Он не имеет определенного поведения для onmouseup собственности

2. Является ли мое окончательное решение, лучший способ сделать это?

Да, но с некоторыми корректировками. Во-первых, подумайте, нужна ли вам глобальная переменная. Тот же эффект может быть достигнут без глобальной переменной, но было бы полезно сохранить его глобальным для целей отладки.

Во-вторых, ваш нерабочий код не требуется. Лучше иметь один всегда существующий прослушиватель событий, который изменяет только безвредную переменную, чем создание нового прослушивателя событий для каждого события mouseup. Кроме того, в вашем «желательном» коде предыдущее событие mouseup никогда не удаляется явно.

function on_load(e) { 
    var drawing = false; // <-- Always declare variables 
    var canvas = document.getElementById("canvas"); 
    canvas.onmousedown = function (e) { drawing = true; }; 
    canvas.onmousemove = function (e) { 
     if (drawing) { 
     var x = e.pageX - canvas.offsetLeft; 
     var y = e.pageY - canvas.offsetTop; 
     var context = canvas.getContext("2d"); 
     context.strokeRect(x, y, 10, 10); 
     } 
    }; 
    window.onmouseup = function (e) { drawing = false; }; 
}

источник

2012-02-13 17:09:15

Вы можете рассмотреть onmouseout обработчик, чтобы остановить рисование, когда мышь покидает свой элемент.

источник

2012-02-13 17:07:56 nolegs

Как OS может гарантировать что-то вроде сбалансированной мыши вниз/вверх в каком-то виджетах. Затем, если вы заработаете на OS/browser «X», как вы узнаете, что OS/браузер «i» или ОС/браузер «W» будут работать одинаково? Есть много причин, по которым вам нужно делать что-то еще, например, даже таймер. Вероятно, накладные расходы на таймер будут малы по сравнению с тем, что вы хотите сделать.

источник

2012-02-13 17:12:11

убедившись, что я получаю событие для мыши для каждой мыши

ответ

Смежные вопросы