The difference between the Clientx,offsetx,screenx and Pagex of JS event object

Always get dizzy by the Clientx,offsetx,screenx,pagex of JavaScript's event object, so I decided to make a diagram to distinguish it (drawing my hand that acid ...). )

First summarize the following differences:

Event.clientx, Event.clienty

The x, Y coordinates (window coordinates) of the mouse relative to the viewable area of the browser window, and the viewable area does not include toolbars and scroll bars. Both IE events and standard events define these 2 properties

Event.pagex, Event.pagey

Similar to Event.clientx, Event.clienty, but they use document coordinates rather than window coordinates. These 2 properties are not standard properties, but are widely supported. There are 2 attributes in the IE event.

Event.offsetx, Event.offsety

The x, y coordinates of the mouse relative to the event source element (srcelement), only IE events have these 2 properties, and standard events do not have corresponding properties.

Event.screenx, Event.screeny

The x, y coordinates of the mouse relative to the upper-left corner of the user Monitor screen. Both standard events and IE events define these 2 properties

The difference between the Clientx,offsetx,screenx and Pagex of JS event object