事件处理程序之间的全局变量答案

【问题标题】：Global variable between event handlers事件处理程序之间的全局变量
【发布时间】：2014-09-04 18:13:44
【问题描述】：

我的画布中有一张地图。我想用鼠标指针拖动这张地图。我在开始时将全局变量 dragMap 设置为 false 并且当鼠标按下时将其设置为 true，然后在鼠标向上时将其设置回 false。对于拖动，我在处理程序中检查了这个全局变量值以获取 mousemove 事件和如果是真的，我用偏移量重绘地图。

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

真的 14 错误

第一个“真”来自 mousedown 处理程序，“假”来自 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;
    });     
});

【问题讨论】：

标签： javascript jquery global-variables

【解决方案1】：

您在第三个处理程序中使用了 mousedown 而不是 mouseup

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

所以当 mousedown 首先发生时，标志设置为 true，然后第二个 mousedown 处理程序运行将其设置为 false，因此在 mousemove 处理程序中您将拥有 dragMap == false。

这些变量也不是Global 变量（window 作用域）它们是closure scoped 变量。

【讨论】：

【解决方案2】：

你的绑定 mousedown 两次，

改变

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

到

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

所以当鼠标按钮被释放时，dragmap 为 false

【讨论】：

【解决方案3】：

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

代码末尾必须是 mouseup

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

【讨论】：