事件處理程序之間的全局變量

Question

我的畫布內有一張地圖。 我想用鼠標拖動這張地圖。 我將全局變量dragMap設置爲false， 在鼠標關閉時將其設置爲true，然後在設置爲false時將其設置爲false。 對於拖動我檢查這個全局變量值處理器爲mousemove事件和 如果它是真的，我重繪與偏移地圖。

上面寫的是我想讓我的代碼做但它不起作用。在mousemove處理程序中，dragMap varialbe始終爲false。當我點擊和drad這個地圖我的控制檯日誌顯示：

 
true 
14 false 

第一個「真正的」鼠標按下從處理occures的「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

你已經在第三處理器使用鼠標按下代替鼠標鬆開

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

所以，當鼠標按下首先發生的標誌被設置爲true，那麼第二mousedown處理運行時將其設置爲false，以便在mousemove處理程序你將有dragMap == false。

這些變量也不是Global變量（window範圍）它們是closurescoped變量。

Answer 2

你的綁定鼠標按下兩次，

變化

$("#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; 
});