A diagram that makes it easy to understand the Clientx,offsetx,screenx,pagex differences between JavaScript event objects

Let's summarize the difference: event.clientx, event.clienty mouse relative to the x, Y coordinates of the viewable area of the browser window (window coordinates), the viewable area does not include toolbars and scroll bars. Both IE events and standard events define these 2 properties Event.pagex, Event.pagey are 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's display screen. Both standard events and IE events define these 2 properties

A diagram that makes it easy to understand the Clientx,offsetx,screenx,pagex differences between JavaScript event objects