1. Concept summary
1、event.clientX、event.clientY
The X and Y coordinates (window coordinates) of the mouse 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 attributes. clientX refers to the distance from the left in the visible area, and the position where the scroll bar is scrolled is the reference point. All browsers are the same. That is, clientX is smaller than pageX when there is a scroll bar.
2、event.pageX、event.pageY
Similar to event.clientX and event.clientY, but they use document coordinates instead of window coordinates. These 2 attributes are not standard attributes, but they are widely supported. These 2 attributes are not present in IE events. pageX refers to the position of the mouse on the page, with the left side of the page as the reference point . When the page is not scrolling, the values of pageX and pageY are equal to the values of clientX and clientY.
3、event.offsetX、event.offsetY
The X and Y coordinates of the mouse relative to the event source element (srcElement). Only IE events have these two attributes, and standard events have no corresponding attributes.
4、event.screenX、event.screenY
The X, Y coordinates of the mouse relative to the upper left corner of the user's monitor screen . Both standard events and IE events define these two attributes. screenX: The position of the mouse on the screen, which refers to the distance from the mouse to the left side of the computer screen. For example: when the webpage is zoomed out and dragged to the middle of the screen, screnX is greater than clientX.
5、event.layerX ,event.layerY
Unique to FireFox , it is relative to the position of the parent element, the mouse relative to the position of the border of "the element that triggers the event that is closest to the element in the hierarchical relationship, and the parent element of positio is set ", starting from the upper left corner of the border, that is If this parent element has a border, the origin of the coordinates is at the upper left corner of the border, not the upper left corner of the content area.
6、event.x,event.y
The distance to the visible area is not recognized by FireFox. It is the same with or without a scroll bar, the same as clientX.
2. Graphical analysis
1. The difference between clientX, offsetX, screenX, pageX:
2. The difference between clientX, offsetX and screenX:
1. The difference between clientX, offsetTop, offsetLeft, offsetWidth, and offsetHeight:
