需要三个效果
鼠标点击获取坐标，点击鼠标移动也显示获取的坐标
抬起鼠标获取坐标。
我现在做出的效果是：点击时显示坐标，移动鼠标也获取坐标，抬起鼠标也可以显示坐标
问题：如何让鼠标抬起后 让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;
}
```
移除 addEventListener() 方法添加的 "mousemove" 事件:
// 向
// 移除
https://www.runoob.com/try/try.php?filename=tryjsref_element_removeeventlistener_crossbrowser
https://www.runoob.com/jsref/met-element-removeeventlistener.html
removeEventListener
可以使用removeEventListener去将绑定的事件移除
问题已解决：
实现效果为点击显示坐标，移动控制台输出111，鼠标抬起显示坐标
window.onload = function () {
//鼠标按下抬起事件(获取坐标)
var box = document.getElementById('div1_2');
box.onmousedown = function (e) {
var x = e.clientX;
var y = e.clientY;
box.innerHTML = x + "," + y;
//鼠标移动事件
document.onmousemove=function (e){
console.log(111)
}
}
//鼠标抬起事件
box.onmouseup = function (e) {
document.onmousemove = null;//取消鼠标移动事件
var x = e.clientX;
var y = e.clientY;
box.innerHTML = x + "," + y;
}