Разница между layerX и offsetX в JavaScript

Существуют различные системы координат для JavaScript, такие как e.clientX, e.screenX.

Я хорошо понимаю этих двоих, но есть такие, как e.layerX и e.offsetX. Эти две вещи мне не очень понятны.

Может кто-нибудь объяснить мне эти две координаты?
2 7
javascript coordinate-systems

2 ответа:

offsetX/offsetY являются аккуратным расширением Microsoft для объектов событий мыши и означают положение указателя мыши относительно целевого элемента. К сожалению, они не реализованы Firefox, и есть разногласия среди других браузеров о том, что должно быть точкой отсчета: IE думает, что это content box, в то время как Chrome, Opera и Safari padding box (что имеет больше смысла, так как это тот же источник абсолютно позиционированного контента). начатки).

layerX/layerY являются свойствами MouseEvent объектов, определенных браузерами на основе Gecko (Firefox et al.). Некоторые говорят, что они являются заменителями offsetX/offsetY - это не так. Они представляют собой положение мыши относительно "ближайшего расположенного элемента", то есть элемента, чье свойство стиля position не является static. Это не целевой элемент, если он статически расположен.

Они поддерживаются Chrome и Opera, но они устарели и скоро будут удалены. Так что забудь об этом. их.
19

LayerX и LayerY извлекают координаты x и y соответственно указателя мыши относительно левого верхнего угла ближайшего расположенного элемента-предка элемента, инициирующего событие.

OffsetX, OffsetY устанавливает или извлекает координаты x, y указателя мыши относительно верхнего левого угла элемента offsetParent элемента, инициирующего событие. Смещение родительского элемента возвращает ссылку на ближайший элемент-предок в DOM иерархия, из которой вычисляется позиция текущего элемента.

1