About js mouse event synthesis each major browser can obtain the coordinates of the attributes of the following five

  • event.clientX/Y
  • event.pageX /Y
  • event.offsetX /Y
  • event.layerX /Y
  • event.screenX /Y

 

ScreenX: The horizontal offset of the mouse position relative to the user’s screen. ScreenY is vertical, and the reference point is the upper-left corner of the screen.

ClientX: Compared to screenX, the reference point is changed to the upper left corner of the browser’s content area, which moves with the scroll bar.

PageX: The reference point is also the upper-left corner of the browser’s content area, but it does not change with the scroll bar

clientX/Y:

ClientX /Y gets the distance from the trigger point to the upper left corner of the browser’s viewable area, unchanged as the page scrolls

Compatibility: Supported by all browsers

pageX/Y:

PageX /Y gets the distance between the trigger point and the upper-left corner of the document area, which changes as the page scrolls

Compatibility: All browsers support this feature except Internet Explorer 6/7/8

offsetX/Y:

OffsetX /Y is the distance between the trigger point and the top left corner of the dom that is triggered, but the top left corner reference point varies between browsers. In IE, the top left corner of the content area is used as the reference point, excluding the border. If the trigger point is on the border, it will return a negative value, while in Chrome, the top left corner of the border is used as the reference point.

Compatibility: All versions of IE, Chrome and Safari are perfectly supported, Firefox is not

 layerX/Y:

LayerX /Y gets the distance between the trigger point and the top left corner of the triggered DOM. The value is the same as offsetX/Y. This variable is used by Firefox instead of offsetX/Y. The dom triggered must be set to position:relative or position: Absolute, otherwise the distance relative to the upper left corner of the HTML document area is returned

Compatibility: Ie6/7/8 is not supported. Opera is not supported. Ie9/10 is supported by Chrome and Safari

screenX/Y:

ScreenX /Y captures the distance between the trigger point and the top left corner of the display screen, unchanged as the page scrolls

Compatibility: Supported by all browsers

Distinguish innerHeight from clientHeight, innerWidth from clientWidth, and scrollLeft from pageXOffset

The window object:

InnerHeight: The height of the document display area in the window, excluding the menu bar, toolbar, etc. This property can be read and written.

IE does not support this attribute. The clientHeight attribute of the body element in IE is the same as this attribute.

InnerWidth: The width of the document display area in the window, again excluding the border. This property can be read and written.

IE does not support this property, and the clientWidth property of the body element in IE is the same as this property.

The clientHeight and clientWidth properties are read-only.

In addition, IE does not support the outerWidth and outerHeight properties.

(3)pageXOffset property: integer read-only property, indicating the number of pixels scroll to the right of the document.

IE does not support this property and uses the scrollLeft property of the body element instead.

(4)pageYOffset property: integer read-only property, indicating the number of pixels scrolling down the document.

IE does not support this property and uses the scrollTop property of the body element instead.

Compatible with IE and DOM browser, how to obtain the width and height of the document display area in the window, use? : conditional statement, as follows:

 windows.innerWidth ? windows.innerWidth : document.body.clientWidth;

 windows.innerHeight ? windows.innerHeight : document.body.clientHeight;

 

Element object:

OffsetLeft, offsetTop properties: Gets the coordinate position of the element relative to the upper-left corner of the document.