[JavaScript鼠标的坐标在Firefox中和在Chrome浏览器中单击并拖动时的行为不同

Question

在https://javascript.info/mouse-events-basics#coordinates-clientx-y-pagex-y上，有一个示例，当您在一个框内移动鼠标时，它会输出鼠标的X和Y位置。

在Firefox（版本70.0）中，如果我单击该框并将其水平拖动到右边缘之外，则X / Y位置值将超过该框的宽度。

但是，在Chrome浏览器（版本77.0.3865.120）中，X / Y位置值永远不会超过框的宽度（大约170）。

为什么？在这种情况下，如何使Chrome的行为类似于Firefox？

提前感谢。

汤姆

Answer 1

这是Firefox中的错误。如果要在其他浏览器（或不依赖错误的Firefox上）上实现相同功能，则需要：

1. 捕获元素clientX和clientY
2. 单击元素，添加文档级的mousemove侦听器，从那里获取clientX和clientY，减去元素的clientX和clientY，对它们进行操作
3. 在文档级mouseup上，删除mousemove侦听器

类似这样的东西

const element = document.getElementById('someId')
const clientRect = element.getBoundingClientRect();
const elementX = clientRect.left;
const elementY = clientRect.top;

element.addEventListener('mousedown', function moveListener() {
  function documentMoveListener(e) {
    console.log(e.clientX - elementX, e.clientY - elementY)
  }

  document.addEventListener('mousemove', documentMoveListener)
  document.addEventListener('mouseup', function mouseUpListener() {
    document.removeEventListener('mouseup', mouseUpListener)
    document.removeEventListener('mousemove', documentMoveListener)
  })
})