Глобальная переменная между обработчиками событий

Question

У меня есть карта внутри моего холста. Я хочу перетащить эту карту с помощью указателя мыши. Я установил глобальную переменную dragMap в значение false в начале и установил значение true, когда указатель мыши опущен, а затем верните его в false, когда он встал. Для перетаскивания Я проверяю это значение глобальной переменной внутри обработчика события mousemove и , если это правда, я перерисовываю карту со смещением.

Написано выше - это то, что я хочу, чтобы мой код выполнял, но он не работает. Внутри обработчика mousemove dragMap varialbe всегда ложь. Когда я нажимаю и drad этой карта моего журнала показывает консоль:

 
true 
14 false 

Первый «истинные» из MouseDown встречается, обработчик «falses» - от mosemove события. Что я делаю неправильно?

$(document).ready(function(){ 
    var dragMap = false; 
    var startDragMapX; 
    var startDragMapY; 

    $("#myCanvas").mousedown(function(e){ 
     dragMap = true; 
     startDragMapX = e.pageX; 
     startDragMapY = e.pageY; 
     console.log(dragMap); 
     //var x = e.pageX - this.offsetLeft; 
     //var y = e.pageY - this.offsetTop; 
    }); 
    $("#myCanvas").mousemove(function(e){ 
     console.log(dragMap); 
     if(dragMap) { 
      console.log(2); 
      oX = e.pageX-startDragMapX; 
      oY = e.pageY-startDragMapY; 
      draw(ctx,1,1,oX,oY); 
     } 
    });   
    $("#myCanvas").mousedown(function(){ 
     dragMap = false; 
    });  
}); 

Answer 1

Вы использовали MouseDown вместо MouseUp в третьем обработчиком

$("#myCanvas").mouseup(function(){ 
    dragMap = false; 
}); 

Так что, когда MouseDown происходит первый флаг установлен верно, то второй mousedown обработчик выполняется установка в ложь, так в mousemove обработчик вы будете иметь dragMap == false.

Также эти переменные не являются переменными Global (window), они являются closurescoped переменными.

Answer 2

ваше связывание MouseDown два раза,

изменение

$("#myCanvas").mousedown(function(){ 
    dragMap = false; 
}); 

в

$("#myCanvas").mouseup(function(){ 
    dragMap = false; 
}); 

так dragmap ложна, когда MouseButton выпущен

Answer 3

$("#myCanvas").mousedown(function(){ 
    dragMap = false; 
}); 

в конце кода должен be mouseup

$("#myCanvas").mouseup(function(){ 
    dragMap = false; 
});