在另一个事件侦听器函数中定义的事件侦听器函数是否访问全局变量的副本？

Question

我正在尝试制作一个可以移动到任何位置的 div，例如拖放功能。我使用了以下方法：

var songs = {};
songs.clickedM = 0;
$(".song-progress .current-position")[0].addEventListener("mousedown", function(down2) {
songs.clickedM = 1;
var intpos2 = down2.clientX;

$(".song-progress .current-position")[0].addEventListener( "mousemove", function(Dmove2) {

    if(songs.clickedM == 1) {           

        if (Dmove2.clientX <= $(".song-progress").offset().left) {
            $(".song-progress .current-position")[0].style.left = "0px";
            
        }
        else if( Dmove2.clientX >= ($(".song-progress").outerWidth() + $(".song-progress").offset().left)) {
            $(".song-progress .current-position")[0].style.left = ( $(".song-progress").outerWidth() - 14) + "px";
           
        }
        else {
            $(".song-progress .current-position")[0].style.left = (Dmove2.clientX - $(".song-progress").offset().left ) + "px";
           
        }
    }

});

});

$("body")[0].addEventListener("mouseup", function() {


songs.clickedM = 0;
   
});

.container {
  padding: 100px;
  width: 700px;
  height: 500px;
  background-color: lightgray;
}
.song-progress {
        position: absolute;
        top: 84px;
        right: 15px;
        height: 5px;
        width: calc(100% - 135px);
        background-color: white;
    }
 .current-progress{
        position: absolute;
        left: 0;
        width: 0px;
        height: 5px;
        background-color: #bbb;
    }
.current-time {
        position: absolute;
        bottom: 5px;
        font-size: 10px;
        left: 0;
        font-family: "Times New Roman"
    }
 .total-time {
        position: absolute;
        bottom: 5px;
        right: 0;
        font-size: 10px;
        font-family: "Times New Roman"
    }
 .current-position {
        height: 9px;
        width: 15px;
        background-color: #00cdff;
        position: absolute;
        top: -2.5px;
        left: 1px;
        cursor: pointer;
        border-radius: 5px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <div class="song-progress">
                <div class="current-time">1:21</div>
                <div class="total-time">5:37</div>
                <div class="current-progress"></div>
                <div class="current-position"></div>
              </div>
              </div>

我注意到songs.clickedM 永远不会变成0，即使松开鼠标键也是如此。我的猜测是mousemove 事件监听器是一个像函数闭包一样的函数。当鼠标在第一次点击后第一次移动时，它会访问songs.clickedM 的副本而不是原始副本。它不知道原来的变量songs.clickedM实际上已经更改为0。

未按下按键时如何为mousemove事件监听器设置songs.clickedM0的值？

Answer 1

我的猜测是mousemove 事件监听器是一个函数，它的作用类似于函数闭包。

它不像一个闭包作用。它是一个闭包。 :-)

当鼠标在第一次点击后第一次移动时，它会访问songs.clickedM 的副本而不是原始副本。它不知道原来的变量songs.clickedM实际上已经变成了0。

没有。闭包可以访问它们关闭的变量，而不是它们关闭的变量的副本。即使他们收到了一份副本，在这种情况下被关闭的变量是songs，它只是对一个对象的引用；它的副本仍将引用相同的对象，具有相同的 clickedM 属性。您所有的偶数处理程序都在它所引用的对象上使用 same songs 变量和相同的 clickedM 属性。问题出在其他地方。

这需要调试，但出现的一个危险信号是代码正在添加一个新的 mousemove 处理程序每次鼠标按下元素，即使它已经之前添加的。所以那些mousemove 处理程序开始堆积起来。