-1

我有以下代码。可以看出，我有一个事件侦听器，当鼠标按钮在 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>

4

2 回答 2

0

最简单的方法是在移动事件侦听器后删除它：

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>

于 2020-08-21T04:38:48.930 回答
0

将您的函数移出第一个侦听器并在需要时添加/删除侦听器：

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);
};
于 2020-08-21T04:34:38.690 回答