The difference between x OffsetX ClientX ScreenX Pagex in JavaScript

Several properties in the JavaScript event object about the location of the event mouse (x, PageX, OffsetX, Scrrenx ClientX) and (Y, Pagey, OffsetY, ScreenY, ClientY),

Where OffsetX, offsety is the offset relative to the upper-left corner of the triggering event element. In different browsers, however, their values differ. In Chrome Opera, Safari refers to the outer edge, that is, the width of the border of the element, Firefox IE does not include the border value. As shown in (a div with a blue border).

Layerx Layery

Layerx Layery is the distance from the outer edge of the parent element of position to absolute or relative. Versions prior to IE8 and IE8 have no layerx or layery values.

Such as: The outermost is a green border div, inside a layer is a red border div, the innermost is a blue border div, click on the Blue Div, The Layerx of the event is the distance from the layery relative to the outermost green outer edge (the position of the middle Red Div is set to absolute or relative, all of which are not relative to the element, and vice versa).

PageX, Pagey, X, Y, ClientX, ClientY

PageX, Pagey is relative to the upper-left corner of the document window, x, Y and Clientx, clienty the same, whose value is relative to the upper-left corner of the viewable window (the viewable area of the view). Such as.

At this point the Visual window overlaps the document window, Pagex equals Clientx, Pagey equals clienty, if we narrow the browser window until the browser appears scroll bar. The position of the upper-left corner of the visible window is unchanged, but the position of the upper-left corner of the document window changes, such as:

Thus we can see that when the browser does not have a scrollbar (the Visual window is coincident with the document window), Pagex is equal to Clientx, Pagex is equal to Clienty, if a drop-down scroll bar appears and the scroll bar is pulled down, the document window scrolls up, If there is a left and right scroll bar and the scroll bar is pulled to the left, the document window scrolls to the scroll, Pagex>=clientx, pagey>=clienty, x = ClientX, y = ClientY in the case of the document window scrolling.

Original address: 49232945

The difference between x OffsetX ClientX ScreenX Pagex in JavaScript