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

Global variable between event handlers

本文关键字：全局变量 之间 程序 事件处理      更新时间：2023-09-26

我的画布中有一张地图。我想用鼠标指针拖动这个地图。我在开始时将全局变量dragMap设置为false当鼠标放下时将其设置为true，然后当鼠标抬起时将其重新设置为false。对于拖动，我在mousemove事件和如果这是真的，我会用偏移量重新绘制地图。

上面写的是我想要我的代码做的事情，但它不起作用。在mousemove处理程序内部，dragMap变量始终为false。当我点击并绘制此地图时，我的控制台日志显示：

真的14错误

第一个"true"出现在mousedown处理程序中，"false"出现在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;
    });     
});

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

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

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

此外，这些变量不是Global变量（window作用域），它们是闭包作用域的变量。

您的绑定鼠标向下两次，

更改

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

至

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

因此，当鼠标按钮释放时，dragmap为false

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

代码末尾必须是鼠标悬停

$("#myCanvas").mouseup(function(){
    dragMap = false;
});
相关文章：