PageX, clientX, offsetX, layerX, offsetxlayerx

PageX, clientX, offsetX, layerX, offsetxlayerx

Among the JS of various browsers, there are many attributes that make you very awesome. The interpretation and execution of the standards by major vendors are different, resulting in great confusion, it also makes our front-end siege lions speechless and tangled.> _ <

John Resig said that a dynamic element has three crucial elements: Position, size, and visibility. So, today, let's take a few page location attributes for unlocking.

1. PageX and clientX

PageX and clientX, which are easy to mix,
PageX: The cursor position on the page, starting from the upper left corner of the page, that is, the page is a reference point and does not change with the slider.
ClientX: The position of the mouse in the visible area of the page, starting from the upper left corner of the visible area of the browser, that is, the position of the sliding bar of the browser at the moment as the reference point, changes with the sliding bar moving.
It's really easy,

Two DIV contact points (black spot position)
If the Y axis of the browser is reduced, the difference between the two can be distinguished when a slide bar appears.

Obviously, the red reference block has been intercepted by a slider, and PageY remains unchanged, but clientY has changed.

However, the tragedy is that PageX only has FF, and IE does not have T_T, so the ox came up with a solution.
PageY = clientY + scrollTop-clientTop; (only the Y axis is discussed, and the X axis is the same, the same below)
Position on the page = visible area position + Page scroll bar cut height-Self-border height, it is still clear

Obviously, at the module junction, scrollTop represents the length of the slide bar rolled by the browser, and adds it to clientY, Which is exactly equal to 100, and then subtract a clientTop, that is, the width of border-top.

The PageX code in Jquery is as follows, which is very refined ..

123456

// Calculate pageX/Y if missing and clientX/Y availableif ( event.pageX == null && event.clientX != null ) {var doc = document.documentElement, body = document.body;event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);}

Ii. screenX

ScreenX: the position of the mouse on the screen, starting from the upper left corner of the screen. There is no dispute. We will not discuss it. ^_^

Iii. offsetX and layerX

Next are offsetX and layerX.
OffsetX: Exclusive to IE. Compared with the trigger event element location, the cursor takes the upper left corner of the content area of the element box model as the reference point. If boder exists, a negative value may occur.

IE starts from the content area, and a negative value will appear when you go up to border.

LayerX: FF is unique. The cursor is compared to the current coordinate system position. That is, if no absolute or relative positioning is set for the trigger element, the page is used as the reference point. If yes, the reference coordinate system is changed, from the top left corner of the border area of the trigger element box model to the reference point
That is, when the trigger element is set to relative or absolute positioning, layerX and offsetX live happily together ^-^, almost equal. The only difference is that a reference point is from border, a content-based reference point

FF starts with border,

X/y: exclusive to IE. This is basically the same as layerX/layerY, but the current coordinate selection of IE is very messy. If you don't need it, don't discuss it.

The six tangle tables summarized by others on the internet ..

123456

offsetX/offsetY：W3C- IE+ Firefox- Opera+ Safari+ chrome+x/y：W3C- IE+ Firefox- Opera+ Safari+ chrome+layerX/layerY：W3C- IE- Firefox+ Opera- Safari+ chrome+pageX/pageY：W3C- IE- Firefox+ Opera+ Safari+ chrome+clientX/clientY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+screenX/screenY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

Only clientX and screenX are happy with W3C standards. Others are entangled.
The most amazing thing is that chrome and safari are all-in-one! All attributes are fully supported. (BOTH offsetX and layerX use border as reference points )...