JavaScript中如何移除事件监听器？鼠标移出图片时移除mousemove监听

你的代码里直接调用removeEventListener无效，因为绑定的是匿名箭头函数，移除监听必须传入同一个命名函数的引用。下面是修改后的完整代码，同时加入了鼠标移出时重置图片样式的逻辑：

修改后的JavaScript代码 #

const image = document.querySelector("img");

// 把mousemove的回调提取成命名函数
function handleMouseMove(event) {
  const { top, bottom, left, right } = event.target.getBoundingClientRect();

  const middleX = (right - left) / 5;
  const middleY = (bottom - top) / 5;

  const clientX = event.clientX;
  const clientY = event.clientY;

  const offsetX = (clientX - middleX) / middleX;
  const offsetY = (middleY - clientY) / middleY;

  event.target.style.transform = `perspective(1000px) rotateY(${offsetX * 5}deg) rotateX(${offsetY * 5}deg) scale3d(1, 1, 1)`;
}

// 绑定mousemove监听
image.addEventListener("mousemove", handleMouseMove);

// 鼠标移出图片时移除监听并重置样式
image.addEventListener("mouseleave", () => {
  image.removeEventListener("mousemove", handleMouseMove);
  image.style.transform = "none";
});

CSS代码（保持不变） #

div.my-img {
  margin: 5rem 25%;
  width: 100%;
  position: relative;
}

img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50%;
  height: auto;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  border-radius: 8px;
  cursor: pointer;
}

HTML代码（保持不变） #

<div class="my-img">
  <img class="tilt" src="https://images.unsplash.com/photo-1542856391-010fb87dcfed">
</div>

关键说明 #

• 必须使用命名函数作为事件回调，这样addEventListener和removeEventListener才能指向同一个函数引用，实现移除监听的效果
• 使用mouseleave事件监听鼠标移出，它只会在鼠标完全离开图片区域时触发，不会像mouseout那样在子元素上误触发
• 移出时重置transform为none，让图片回到初始状态，提升用户体验

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