Javascript requestAnimationFrame的问题

我有一个问题：

document.querySelector（'div'）.addEventListener（'mousedown'，function（）{
你好=真的
document.body.addEventListener（'mousemove'，函数（e）{
如果（你好）{
document.querySelector（'div'）.style.left=（e.clientX-12.5）+'px'
document.querySelector（'div'）.style.top=（e.clientY-12.5）+'px'
}
})
此.addEventListener（'mouseup'，函数（e）{
hello=false
posY=Math.floor（parseInt（this.style.top））
函数Fall（）{
波西++
document.querySelector（'div'）.style.top=posY+'px'
if（posY！=parseInt（window.innerHeight）-25）requestAnimationFrame（Fall）
}
秋天
})
})

正文{
保证金：0；
位置：绝对位置；
高度：100vh；
宽度：100vw；
溢出：隐藏
}
div{
位置：绝对位置；
高度：25px；
宽度：25px；
边框：1px#000实心；
底部：0
}
div:悬停{
光标：指针；
}

---

问题在于，每当div接收到

鼠标向下

时，您都在添加

鼠标向下

处理程序。您只想执行一次，因此将其移出

mousedown

处理程序。因此，在第二次调用时设置动画两次（因为两个处理程序都响应），在第三次调用时设置动画三次（因为所有三个处理程序都响应），等等。由于多个处理程序正在更新

poxY

，它不再停止在地面，因为

=检查除其中一个外，其余均失败。（请参阅代码段下的更多注释。）


document.querySelector（'div'）.addEventListener（'mousedown'，function（）{
你好=真的
document.body.addEventListener（'mousemove'，函数（e）{
如果（你好）{
document.querySelector（'div'）.style.left=（e.clientX-12.5）+'px'
document.querySelector（'div'）.style.top=（e.clientY-12.5）+'px'
}
})
})
//移到下面
document.querySelector（'div'）。addEventListener（'mouseup'，function（e）{
hello=false
posY=Math.floor（parseInt（this.style.top））
函数Fall（）{
波西++
document.querySelector（'div'）.style.top=posY+'px'
if（posY！=parseInt（window.innerHeight）-25）requestAnimationFrame（Fall）
}
秋天
})
正文{
保证金：0；
位置：绝对位置；
高度：100vh；
宽度：100vw；
溢出：隐藏
}
div{
位置：绝对位置；
高度：25px；
宽度：25px；
边框：1px#000实心；
底部：0
}
div:悬停{
光标：指针；
}
只要单击div（鼠标向下），就会分配另一个侦听器。当您停止单击时，这些侦听器都按顺序执行，因此在第二次单击时，将有两个循环在运行，在第三次单击之后，将有三个循环在运行，依此类推。您可以只分配侦听器一次：

var hello,posY;

document.querySelector('div').addEventListener('mousedown', function(){
  hello = true;
});

document.body.addEventListener('mousemove', function(e){
    if (hello) {
        document.querySelector('div').style.left = (e.clientX - 12.5) + 'px';
        document.querySelector('div').style.top = (e.clientY - 12.5) + 'px';
    }
});

document.querySelector('div').addEventListener('mouseup', function(e){
    hello = false;
    posY = Math.floor(parseInt(this.style.top));
    function Fall() {
        posY++;
        document.querySelector('div').style.top = posY + 'px';
        if (posY < parseInt(window.innerHeight) - 25) requestAnimationFrame(Fall);
    }
    Fall();
});

var你好，波西；
document.querySelector（'div'）。addEventListener（'mousedown'，function（）{
你好=真的；
});
document.body.addEventListener（'mousemove'，函数（e）{
如果（你好）{
document.querySelector（'div'）.style.left=（e.clientX-12.5）+'px'；
document.querySelector（'div'）.style.top=（e.clientY-12.5）+'px'；
}
});
document.querySelector（'div'）。addEventListener（'mouseup'，function（e）{
hello=false；
posY=Math.floor（parseInt（this.style.top））；
函数Fall（）{
posY++；
document.querySelector（'div'）.style.top=posY+'px'；
如果（posY

在此代码中，请始终以分号结尾…
”（如果您需要html/css，“问题的全部内容必须在您的问题中。如果您想让人们更容易地帮助您，请使用堆栈片段（
[]
工具栏按钮）以可运行的方式演示问题来更新您的问题）.编辑：这次我帮你做了。我刚刚编辑：）谢谢你的回答！（对不起分号，但我更喜欢这样：p，它们是可选的！）@D.Tritonic它们在90%的情况下是可选的。如果它成为一种习惯，不使用它们，它会在一些时候崩溃，你不知道为什么。如果您使用分号，它总是起作用。…。@D.Tritonic：它们不是可选的，但是JavaScript中内置了一个错误更正机制，可以在解析阶段为您插入它们。这不是一回事。“请始终用分号结束表达式”语句，而不是表达式。分号出现在尚未被块终止的语句末尾。感谢您的回答！我不会再那样做了！