无法移除mousemove事件监听器的问题求助

嘿，我完全懂你现在的困扰！你明明看到mouseup事件正常触发了，但mousemove监听器就是死活删不掉，对吧？我之前也踩过这个坑😅

问题的核心出在你用的匿名函数上！每次你写e => mouseDown(e)的时候，其实都是创建了一个全新的函数实例。你在mousedown时添加的是函数A，到mouseup时试图移除的却是另一个全新的函数B——这俩代码逻辑虽然一样，但在JavaScript里是完全不同的引用，所以removeEventListener根本找不到要移除的那个监听器。

解决办法很简单，把这个处理函数抽成一个单独的变量，这样添加和移除用的是同一个函数引用：

// 先把处理函数单独提取出来
const handleMouseMove = e => mouseDown(e);

zoomDiv.addEventListener("mousedown", ()=>{
    console.log("mousedown");
    zoomDiv.addEventListener("mousemove", handleMouseMove);
})
zoomDiv.addEventListener("mouseup", ()=>{
    console.log("mouseup");
    zoomDiv.removeEventListener("mousemove", handleMouseMove);
})

这样一来，添加和移除的是同一个函数对象，removeEventListener就能精准定位并移除它啦！另外给你个小建议：最好把mouseup事件绑定到document上，不然如果鼠标在zoomDiv元素外面松开，mouseup事件可能不会触发，导致mousemove监听器一直挂着哦～

备注：内容来源于stack exchange，提问作者samet