Доступ к переменным с помощью события javascript (без jQuery) .onmouseup

Question

У меня возникли проблемы с пониманием, как заставить переменную работать в моем .onmouseup событие.

у меня есть .onmousemove событие, которое определяет локальную переменную, например расстояние, на которое мышь переместилась с .onmousedown, Я хочу использовать эту информацию в функции, которая выполняет .onmouseupОднако я не могу получить это там. Вот соответствующие биты кода:

document.onmousedown = function(){
   var mouseStart = [event.pageX,event.pageY];
   document.onmousemove = function(){
       var dist = Math.sqrt(Math.pow(event.pageY-mouseStart[1],2)+Math.pow(event.pageX-mouseStart[0],2));
       document.onmouseup = function() {
          global_function(dist);
          document.onmousemove = null;
      }
   }
}

Я не понимаю почему mouseStart доступно, но я получаю ошибку, что dist не определено.

У меня есть другие переменные, которые также должны быть переданы, которые не могут быть переопределены во время .onmouseup,

Answer 1

Я думаю, вы захотите добавить обработчик события onmouseup в обработчик onmousedown. В некоторых браузерах событие mousemove запускается примерно 50 раз в секунду, поэтому вы постоянно добавляете и удаляете события мыши вверх / вниз. Тогда вы захотите объявить dist внутри обработчика mousedown.

Для совместимости с браузером event объект передается в обработчик событий многими браузерами, а в других это глобальная переменная. Просто event = window.event || event в сочетании с объявлением event Аргумент к обработчику делает свое дело.

document.onmousedown = function(event) {
    event = window.event || event;
    var mouseStart = [event.pageX,event.pageY];
    var dist;

    document.onmouseup = function() {
        global_function(dist);
        document.onmousemove = null;
    };

    document.onmousemove = function(ev) {
        ev = window.event || ev;
        dist = Math.sqrt(Math.pow(ev.pageY-mouseStart[1],2)+Math.pow(ev.pageX-mouseStart[0],2));
    };
};

Answer 2

Убедитесь, что определения вашей функции не наследуют пассивно event переменная от их закрытия. Вы должны явно принять event переменная в определении функции, т.е. function(event){}не function(){},

Кроме того, вы выполняете чрезмерные вычисления, вычисляя dist в событии mousemove, его не следует вычислять до mouseup.

Следующее работает для меня в Firefox.

document.onmousedown = function(event){
    var mouseStart = [event.pageX,event.pageY];
    document.onmouseup = function(event) {
        var dist = Math.sqrt(Math.pow(event.pageY-mouseStart[1],2)+Math.pow(event.pageX-mouseStart[0],2));
        console.log(dist); //global_function(dist);
        document.onmouseup = null;
    }
}

Answer 3

Я изменил это так, и это сработало:

document.onmousedown = function (evt) {
    var e = evt || window.event;
    var mouseStart = [e.pageX, e.pageY];
    document.onmouseup = function (ev) {
        var evnt = ev || window.event;
        var dist = Math.sqrt(Math.pow(evnt.pageY - mouseStart[1], 2) + Math.pow(evnt.pageX - mouseStart[0], 2));
        alert(dist);
        document.onmouseup = null;
    };
};

Как видите, я удалил onmousemove событие, но оно все еще работает с тем же результатом.