鼠标拖拽旋转功能中removeEventListener失效：参数设置与原因排查

嘿，刚看了你的代码，发现你对removeEventListener的用法有点误解，而且逻辑上也有小问题，咱们一步步来理清楚～

先讲removeEventListener的核心规则 #

要让这个方法生效，必须满足三个完全一致的条件：

• 事件类型相同（比如都是mousedown或者mousemove）
• 回调函数是同一个引用（不能用匿名函数，也不能每次调用都生成新函数）
• useCapture参数（第三个布尔值）和添加监听时完全匹配

举两个反例帮你理解：

// 添加时用了useCapture: true
target.addEventListener("mousedown", rotate, true);
// 移除时用了false，参数不匹配，移除无效
target.removeEventListener("mousedown", rotate, false);

// 添加时用了匿名函数
target.addEventListener("mousemove", (e) => { /* 旋转逻辑 */ });
// 这里的匿名函数和上面的不是同一个引用，移除无效
target.removeEventListener("mousemove", (e) => { /* 旋转逻辑 */ });

你的代码里的核心问题 #

1. 移除的事件类型完全错误：你在mouseup时试图移除mousedown的监听，但实际上要停止的是mousemove的旋转逻辑——mousedown只是触发旋转的开关，真正让元素持续旋转的是mousemove事件。
2. mousemove的回调是匿名函数，无法被移除：你把mousemove监听写在了rotate函数内部，每次mousedown都会新增一个匿名回调，后续根本拿不到这个函数的引用，导致鼠标松开后旋转还在继续。
3. useCapture参数不匹配：添加mousedown监听时用了true，但移除时用了false，就算你真的要移除mousedown监听，这样也不会生效。

修正后的代码 #

我们把mousemove的回调抽成单独的函数，确保能拿到引用，同时调整监听的添加和移除逻辑：

HTML代码 #

<body>
    <div class="wrap">
        <div class="target">target</div>
    </div>
</body>

JavaScript代码 #

const target = document.querySelector(".target");
const wrap = document.querySelector(".wrap");
let center = {
  x: target.getBoundingClientRect().left + target.clientWidth / 2,
  y: target.getBoundingClientRect().top + target.clientHeight / 2,
};

window.addEventListener("resize", () => {
  center = {
    x: target.getBoundingClientRect().left + target.clientWidth / 2,
    y: target.getBoundingClientRect().top + target.clientHeight / 2,
  };
});

// 把旋转逻辑抽成单独的函数，方便后续移除
const handleMouseMove = (e) => {
  const x = center.x - e.clientX;
  const y = center.y - e.clientY;

  const radian = Math.atan2(y, x);
  const degree = ((radian * 180) / Math.PI).toFixed(0);
  target.style.transform = "rotate(" + degree + "deg)";
};

// mousedown时添加mousemove监听
const startRotate = () => {
  target.addEventListener("mousemove", handleMouseMove);
};

// mouseup时移除mousemove监听
const stopRotate = () => {
  target.removeEventListener("mousemove", handleMouseMove);
};

// 绑定触发和停止的事件监听
target.addEventListener("mousedown", startRotate);
target.addEventListener("mouseup", stopRotate);
// 额外给window加mouseup监听，防止鼠标在元素外松开时无法停止旋转
window.addEventListener("mouseup", stopRotate);

额外提醒 #

• 给window添加mouseup监听是拖拽类功能的常见细节，避免用户按住鼠标移出元素后，元素一直处于旋转状态。
• 如果没有特殊的事件捕获需求，useCapture参数可以省略（默认是false），减少参数不匹配的风险。

内容的提问来源于stack exchange，提问作者ming