How to stop onmouseup function inside mouse move event listener

Question

I have the following code. As can be seen, I have an event listener that triggers when the mouse button is pressed down on a div ("myDiv"). If the mouse is moved the div moves, and then when the mouse button is released, a messaged is logged to the console. Problem is, every time after that, even when the mouse isn't over the div, if the mouse button is released, the same message is logged to the console. I've managed to turn off the onmousemove function with "document.onmousemove = null". But how do I stop the mouseup function from perpetually executing? Vanilla javascript only. Thanks

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>

Use named functions as handlers, and then [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). You also have to remove the mouseup listener to avoid the extra messages. — Teemu, Aug 21 '20 at 04:14
If I write "document.onmouseup = null;" at the end of the "document.onmouseup" block i.e. immediately after the console.log, it solves the problem. I'm not sure if this is anything close to best practices though. Also I don't know what you mean in your comment Teemu. — Normajean, Aug 21 '20 at 04:28
Follow the link to understand the comment ... [In the example](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#Example) you can see a declared function named `makeBackgroundYellow`, and then in `add/removeEventListener` how the function name has been used to add/remove the event listener. — Teemu, Aug 21 '20 at 04:31

score 0 · Answer 1 · answered Aug 21 '20 at 04:34

Move your functions out of the first listener and add/remove the listeners when needed:

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);
};

score 0 · Answer 2 · answered Aug 21 '20 at 04:38

The simplest way to do it is to remove the event listener after it is moved:

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>

How to stop onmouseup function inside mouse move event listener

2 Answers2