The difference between clientX, pageX, offsetX and screenX

It is not difficult to tell the difference between these attributes, but it is easy to get confused. If you haven’t used them for a long time, you will find that you have forgotten the difference and you can’t remember which one is which! Really crazy!

Difference:

clientX, clientY:

X, Y coordinates (window coordinates) relative to the visible area of ​​the browser window. The visible area does not include toolbars and scroll bars. Both IE events and standard events define these two properties.

pageX, pageY:

Similar to clientX and clientY, but they use document coordinates instead of window coordinates. These 2 properties are not standard properties, but are widely supported. There are no these two attributes in IE events.

offsetX, offsetY:

Relative to the X and Y coordinates of the event source element (srcElement), only IE events have these two attributes, and standard events have no corresponding attributes.

screenX, screenY:

X,Y coordinates relative to the upper left corner of the user's monitor screen. Both standard events and IE events define these two properties.

Actually, the differences between these are easy to remember! In fact, it is the meaning of the English word, but it will be very confusing to the majority of Chinese people.

client is the client, and the client is the browser, which is the coordinates relative to the browser.

Page is a document, which is the coordinates relative to the web page, that is, the coordinates relative to the visible area of ​​the browser plus scroll bars.

offset is the offset, which is the offset position relative to the source element.

Screen is the screen, that is, the coordinates relative to the screen.

This will make it easier to remember~