Question

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

上面写的是我希望我的代码可以做的但它不起作用。在mousemove处理程序内部，dragMap varialbe始终为false。当我点击并显示此地图时，我的控制台日志显示：

true
14 false

第一个＆＃34; true＆＃34;从mousedown处理程序，＆＃34; falses＆＃34; - 来自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首先发生时，标志设置为true，然后第二个mousedown处理程序运行将其设置为false，因此在mousemove处理程序中，您将拥有dragMap == false。

此外，这些变量不是Global变量（window作用域），而是closure scoped个变量。

Answer 2

你的绑定mousedown两次，

变化

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

到

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

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

Answer 3

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

代码末尾的

必须是mouseup

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

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

3 个答案: