Javascript 如何在鼠标移动事件侦听器中停止onmouseup函数

我有以下代码。可以看出，我有一个事件监听器，当按下div上的鼠标按钮（“myDiv”）时会触发它。如果移动鼠标，div将移动，然后松开鼠标按钮，控制台将记录一条消息。问题是，每次之后，即使鼠标不在div上，如果松开鼠标按钮，相同的消息也会记录到控制台。我已经用“document.onmousemove=null”关闭了onmousemove函数。但是如何阻止mouseup函数永久执行呢？仅限香草javascript。谢谢

var myDiv=document.getElementById（“div”）；
myDiv.addEventListener（“鼠标向下”，函数（事件）{
document.onmousemove=函数（事件）{
myDiv.style.left=event.clientX+“px”；
};
document.onmouseup=函数（事件）{
document.onmousemove=null；
log（“您移动了div”）；
};
});
#div{
宽度：100px；
高度：100px；
位置：绝对位置；
背景色：rgba（0,50150,1）；
}
将函数移出第一个侦听器，并在需要时添加/删除侦听器：

myDiv.addEventListener（“鼠标向下”，函数（事件）{
//添加侦听器
文件。添加的文件列表器（'mousemove'，mousemove）；
文件。添加的列表器（“鼠标”，鼠标）；
});
函数mouseMove（事件）{
myDiv.style.left=event.clientX+“px”；
};
函数mouseUp（事件）{
log（“您移动了div”）；
//删除侦听器
document.removeEventListener（'mousemove'，mousemove）；
文件。删除VentListener（'mouseup'，mouseup）；
};
最简单的方法是在移动事件侦听器后将其删除：


var myDiv=document.getElementById（“div”）；
myDiv.addEventListener（“鼠标向下”，函数（事件）{
document.onmousemove=函数（事件）{
myDiv.style.left=event.clientX+“px”；
};
document.onmouseup=函数（事件）{
document.onmousemove=null；
log（“您移动了div”）；
document.onmouseup=null；
};
});
#div{
宽度：100px；
高度：100px；
位置：绝对位置；
背景色：rgba（0,50150,1）；
}
使用命名函数作为处理程序，然后。您还必须删除mouseup侦听器以避免额外的消息。如果我在“document.onmouseup”块的末尾（即在console.log之后）写入“document.onmouseup=null；”，那么问题就解决了。不过，我不确定这是否接近最佳实践。我也不知道你的评论Teemu是什么意思。按照链接来理解你的评论。。。您可以看到一个名为
makeBackgroundYellow
的声明函数，然后在
add/removeEventListener
中查看函数名如何用于添加/删除事件侦听器。