Analyze the differences among X, offsetx clientx screenx, pagex, Y, offsety clienty screeny, and Pagey

Download this case: event1.html (3.7 KB)
Case studies

1. x and y of IE: set or obtain the cursor position (triggered node testid1) to the parent node with the ID testidOuter borderDistance, excluding the scroll bar

Display the x coordinates of IE:

Display y coordinates of IE:

Note: The x and y coordinates of IE do not include the scrolling distance scrollLeft, scrollTop, and visible area.

2. ff'sPageX: Set or get the mouse pointer position (triggered node testid1). The distance to the page document (including the scroll distance) is based on the reference point in the upper left corner of the document, notBrowserReference point in the upper left corner
Compatible with IE: event. clientX +Document. Body. scrollLeft = pageX

Display pageX of ff:

Display the pageY of ff:

3. clientX sets or obtains the distance from the mouse pointer position (triggered node testid1) to the browser (excluding the scroll distance), and uses the browser's upper left corner as the reference point.

DisplayClientX:

DisplayClientY:

4. Set or get the cursor position (triggered node testid1) to its own node (testid1)Inner Boundary(Including the rolling distance, that is, the Invisible Area)

DisplayOffsetXOr ff layerX:

DisplayOffsetYOr ff layerY:

5. set or obtain the distance from the mouse pointer position (triggered node testid1) to the screen by screenX and screenY

Show screenX:

Show screenY:

To sum up, the coordinates are used to figure out what is the reference point.
1. x and y of ie are the external reference points of the parent element of the event-triggered element (excluding the rolling distance)
2. FF pageX, pageY is BodyThe element is a reference point (so it must include a rolling distance)
3. clientX and clientY of ie and ff take the upper left corner of the browser as the reference point (so the scroll distance is definitely not included)
4. For ie offsetX, offsetY, and ff layerX, layerY takes the upper left corner of the event-triggered element's internal bounds as the reference point (certainly including the scroll distance). When there is a border, a negative number may occur.
When the height (or width) of the child element is greater than the height (or width) of the parent element, the style. overflow setting

From: http://www.eyejs.com/html/16/n-16.html