我试图制作一个可以移动到任何位置(例如拖放功能)的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.clickedM 0的值?

最佳答案

我的猜测是mousemove事件侦听器是一个函数,其作用类似于函数闭包。


它不像闭包那样。这是一个关闭。 :-)


  鼠标第一次单击后第一次移动时,它访问的是songs.clickedM副本而不是原始副本。没有意识到实际上原始变量songs.clickedM已更改为0的事实。


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

需要进行调试的地方,但出现的一个红色标记是,即使每次以前在元素上按下鼠标,代码也会每次都添加一个新的mousemove处理程序。因此,这些mousemove处理程序开始堆积。

09-05 14:26