JS实现跟随鼠标移动的方块——offsetX/offsetY偏移异常问题

我来帮你分析下问题所在，以及如何修复：

问题根源 #

你当前使用e.offsetX和e.offsetY作为translate()的偏移值，但translate()是基于方块自身的初始位置进行偏移的。也就是说，每次鼠标移动时，都会把方块从它的原始左上角位置，重新偏移e.offsetX和e.offsetY像素，而不是让方块从当前位置跟随鼠标移动。这就导致了看起来方块“回到初始位置”再重新定位的问题。

另外，如果你期望方块的中心跟随鼠标，直接用offsetX/offsetY还会让方块的左上角对准鼠标，视觉上也不符合“跟随”的预期。

修复方案 #

这里提供两种常用的解决方法，你可以根据需求选择：

方法1：使用绝对定位（推荐，逻辑更直观）

通过给容器设置相对定位，方块设置绝对定位，直接控制方块的left和top属性，让它的中心对准鼠标位置：

修改后的CSS：

.container {
  background-color: red;
  height: 200px;
  width: 400px;
  position: relative; /* 让容器成为绝对定位元素的参考容器 */
}
.square {
  background-color: blue;
  height: 50px;
  width: 50px;
  position: absolute; /* 开启绝对定位 */
}

修改后的JS：

let square = document.querySelector('.square')
let container = document.querySelector('.container')
container.addEventListener('mousemove', movingSquare);

function movingSquare(e) {
  // 减去方块宽高的一半，让鼠标落在方块中心
  const targetLeft = e.offsetX - square.offsetWidth / 2;
  const targetTop = e.offsetY - square.offsetHeight / 2;
  
  // 设置方块的定位
  square.style.left = `${targetLeft}px`;
  square.style.top = `${targetTop}px`;
}

方法2：继续使用translate()

如果坚持用transform: translate()，需要计算出方块左上角相对于容器左上角的正确偏移量（同样让中心对准鼠标）：

修改后的JS（CSS不需要改动）：

let square = document.querySelector('.square')
let container = document.querySelector('.container')
container.addEventListener('mousemove', movingSquare);

function movingSquare(e) {
  // 计算偏移量：鼠标位置减去方块自身半宽/半高
  const x = e.offsetX - square.offsetWidth / 2;
  const y = e.offsetY - square.offsetHeight / 2;
  
  // 更新transform属性
  square.style.transform = `translate(${x}px, ${y}px)`;
}

这两种方法都能让方块平滑跟随鼠标移动，不会出现“回到初始位置”的问题。

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