通过js设置顶部和左侧样式属性时出现奇怪的不一致错误

Question

我创建了一个具有固定位置和大小的 div 元素。然后我通过

top

事件处理程序中的 js 设置它的

left

和

mousemove

样式属性。

const mouse = document.getElementById('mouse');
window.addEventListener("mousemove", e => {
  mouse.style.left = e.offsetX + 'px';
  mouse.style.top = e.offsetY + 'px';
  console.log(e.offsetX, e.offsetY);
});

https://jsfiddle.net/xqa91b23/4/（晃动鼠标即可查看错误）

看起来大约一半的分配工作有效，其余时间 css 属性最终被设置为 0px。我正在记录传递到

mousemove

事件处理程序中的鼠标位置，它与最终分配给元素的

style

属性的值不对应。最奇怪的部分是，如果我将

transform: translate(-50px, -50px)

添加到元素中，则错误的分配会包含此偏移量，最终为 50px。这在 Chrome 和 Firefox 中都会发生。

我尝试过的一些事情：

• 通过

  element.style.setProperty

  设置样式，有或没有

  important

• 将元素定位更改为

  absolute

  和

  relative

• 将 body 和 html 元素定位为

  fixed

  、

  absolute

  和

  relative

  ，宽度和高度为 100%
• 限制鼠标移动的

  event.offset

  （尽管它们在控制台中显示为整数）

这个让我用头撞墙。我过去动态设置偏移属性没有问题。我怀疑它与

+ 'px'

应用的数字到字符串转换有关，但这并不能解释添加翻译时的奇怪行为。

Answer 1

问题是由于使用了事件的

offsetX

和

offsetY

属性。这些参数与事件目标相关，而不是与窗口相关。要解决此问题，您需要使用

e.clientX

和

e.cleintY

。

const mouse = document.getElementById('mouse');
window.addEventListener("mousemove", e => {
  mouse.style.left = e.clientX + 'px';
  mouse.style.top = e.clientY + 'px';
  console.log(e.clientX, e.clientY);
});

#mouse {
  position: fixed;
  width: 100px;
  height: 100px;
  outline: 1px solid red;
}

<div id="mouse"></div>