如何让鼠标抬起后移动不在显示坐标

Question

需要三个效果
鼠标点击获取坐标，点击鼠标移动也显示获取的坐标
抬起鼠标获取坐标。
我现在做出的效果是：点击时显示坐标，移动鼠标也获取坐标，抬起鼠标也可以显示坐标
问题：如何让鼠标抬起后 让mousemove这个方法失效？只需要点击鼠标移动时可以获取坐标就可以

```html
<!-- 标题栏 -->
<div class="div1" id="div1"></div >

 window.onload = function () {
        //鼠标按下抬起事件(获取坐标)
        var box = document.getElementById('div1');
        box.onmousedown = function (e) {
            var x = e.clientX;
            var y = e.clientY;
            box.innerHTML = x + "," + y;
            //鼠标移动
            box.addEventListener("mousemove", function(e) {
                const x = e.pageX - this.offsetLeft;
                const y = e.pageY - this.offsetTop;
                box.textContent = `x: ${x}, y: ${y}`;

            });

        }
        box.onmouseup = function (e) {
            var x = e.clientX;
            var y = e.clientY;
            box.innerHTML = x + "," + y;
        }

```

Answer 1

移除 addEventListener() 方法添加的 "mousemove" 事件:

// 向

元素添加事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// 移除

元素的事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);