我试图制作一个可以移动到任何位置(例如拖放功能)的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
处理程序开始堆积。