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

问题描述

我有以下代码。可以看出，我有一个事件侦听器，当在div（“ myDiv”）上按下鼠标按钮时会触发该事件侦听器。如果移动了鼠标，div就会移动，然后释放鼠标按钮时，会在控制台中记录一条消息。问题是，此后每次，即使鼠标不在div上，如果释放鼠标按钮，相同的消息也会记录到控制台。我设法通过“ document.onmousemove = null”关闭了onmousemove函数。但是，如何停止永久执行mouseup功能呢？仅适用于JavaScript。谢谢

var myDiv = document.getElementById("div");

myDiv.addEventListener("mousedown",function(event) {

  document.onmousemove = function(event) {
    myDiv.style.left = event.clientX + "px";
  };

  document.onmouseup = function(event) {
    document.onmousemove = null;
    
    console.log("you moved the div");

  };

});

#div {
width: 100px;
height: 100px;
position: absolute;
background-color: rgba(0,50,150,1);
}

<div id="div"></div>

解决方法

将功能移出第一个侦听器，并在需要时添加/删除侦听器：

myDiv.addEventListener("mousedown",function(event) {
    // Add the listeners
    document.addEventListener('mousemove',mouseMove);
    document.addEventListener('mouseup',mouseUp);
});

function mouseMove(event) {
    myDiv.style.left = event.clientX + "px";
};

function mouseUp (event) {
    console.log("you moved the div");
    // Remove the listeners
    document.removeEventListener('mousemove',mouseMove);
    document.removeEventListener('mouseup',mouseUp);
};

,

最简单的方法是移动事件监听器后将其删除：

var myDiv = document.getElementById("div");

myDiv.addEventListener("mousedown",function(event) {

  document.onmousemove = function(event) {
    myDiv.style.left = event.clientX + "px";
  };

  document.onmouseup = function(event) {
    document.onmousemove = null;
    
    console.log("you moved the div");
    document.onmouseup = null;
  };

});

#div {
width: 100px;
height: 100px;
position: absolute;
background-color: rgba(0,50,150,1);
}

<div id="div"></div>