javascript - 事件处理程序之间的全局变量

Question

我的 Canvas 里有一张 map 。 我想用鼠标指针拖动这张 map 。 我在开始时将全局变量 DragMap 设置为 false 当鼠标按下时将其设置为 true ，然后在鼠标抬起时将其设置回 false 。 对于拖动，我在处理程序中检查 mousemove 事件的全局变量值，然后 如果这是真的，我会用偏移量重新绘制 map 。

上面写的是我希望我的代码执行的操作，但它不起作用。在 mousemove 处理程序中，dragMap 变量始终为 false。当我单击并拖动此 map 时，我的控制台日志显示:

true
14 false

The first "true" occures from mousedown handler, the "falses" - from mosemove event. What am I doing wrong?

$(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 首先发生时，标志设置为 true，然后第二个 mousedown 处理程序运行，将其设置为 false，因此在 mousemove 处理程序中，您将拥有 DragMap == false.

此外，这些变量不是全局变量(窗口范围)，它们是 closure scoped变量。