Координаты мыши в 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. при нажатии элемента, добавитьпрослушиватель перемещения мыши на уровне документа, получите clientX и clientY оттуда, вычтите элемент clientX и clientY вашего элемента, сделайте с ними что-нибудь
3. при наведении мыши на уровне документа, удалите прослушиватель 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)
  })
})