Figure out the difference between event coordinates screenx, clientx, pagex and offsetx

Graphical event coordinates screenX、clientX、pageX, offsetX The difference between

One 、 The illustration

As shown in the figure , Suppose the gray dot in the page is where the mouse clicks , The yellow area is the mouse trigger event object

Two 、 Concept

1、screenX and screenY

• Reference point ： The upper left corner of the computer screen
• screenX： The horizontal offset of the mouse click position relative to the upper left corner of the computer screen
• screenY： The vertical offset of the mouse click position relative to the upper left corner of the computer screen

2、clientX and clientY

• Reference point ： The upper left corner of the browser content area
• clientX： The horizontal offset of the mouse click position relative to the viewable area of the browser （ The horizontal scrolling distance is not calculated ）
• clientY： The vertical offset of the mouse click position relative to the viewable area of the browser （ The distance of the vertical scroll bar is not calculated ）

3、pageX and pageY

• Reference point ： The upper left corner of the page
• pageX： The horizontal offset of the mouse click position relative to the upper left corner of the web page , That is to say clientX Add the distance of the horizontal scroll bar
• pageY： The vertical horizontal offset of the mouse click position relative to the upper left corner of the web page , That is to say clientY Add the distance of the vertical scroll bar

4、offsetX and offsetY

• offsetX： The horizontal distance between the mouse click position and the trigger event object
• offsetY： Vertical distance of mouse click position relative to trigger event object

3、 ... and 、 Event object parameters