JS magic Hall: Attributes of element location and mouse location

JS magic Hall: Attributes of element location and mouse location
1. attributes of the mouse position 1. The border, padding, and content areas in the Area box model that triggers the mouse event will trigger the mouse event. clicking the margin area will not trigger the mouse event. 2. Attribute [a]. evt. pageX/Y under the mouse event object MouseEvent: The reference point in the upper left corner of the page, indicating the horizontal and vertical distance between the current trigger point and the upper left corner of the page. Note: 1. IE5.5 ~ 8. This attribute is not supported. The polyfill method pageX = clientX + scrollLeft 2. the upper left corner of the page does not refer to the upper left corner of the box model border outer border of the html or body label, but the upper left corner of the document. The position cannot be adjusted through css. [B]. evt. clientX/Y: uses the upper-left corner of the visible area as the reference point to indicate the horizontal and vertical distance between the current trigger point and the upper-left corner of the visible area. Note: all browsers support [c]. evt. offsetX/Y: uses the upper-left corner of the dom where the trigger point is located as the reference point, indicating the horizontal and vertical distance between the current trigger point and the upper-left corner of the dom where the trigger point is located. Note: 1. Chrome uses the upper left corner of the dom's border outer border as the reference point; 2. IE5.5 ~ 9. The upper left corner of dom content is used as the reference point. 3. FF does not support this attribute [d]. evt. screenX/Y: uses the upper-left corner of the screen as the reference point to indicate the horizontal and vertical distance between the current trigger point and the upper-left corner of the screen. Note: all browsers support [e]. evt. layerX/Y: When the dom position of the trigger point is relative or absolute, the upper left corner of the dom's border outer border is used as the reference point, otherwise, it takes the upper left corner of the page as the reference point (consistent with pageX ). Note: IE5.5 ~ 8 does not support 2. Attribute 1. HTMLElement. clientLeft/Top: width of the Left border of the element and height of the upper border. 2. HTMLElement. clientWidth/Height: The width or Height of the element content + padding-scroll bar. 3. HTMLElement. offsetWidth/Height: The width or Height of the element content + padding + border. 4. HTMLElement. scrollLeft/Top: horizontal or vertical scroll bar width or height of the element. Note: In the W3C standard format, document.doc umentElement. scrollLeft/Top gets the part of the page's scroll bar. In W3C weird mode, the body is used. scrollLeft/Top to get 5. HTMLElement. offsetParent: the most recent ancestor element that has been positioned by CSS. 6. HTMLElement. offsetTop/Left: vertical and horizontal distance between the upper Left corner of the element border outer border and the upper Left corner of the padding outer border of offsetParent. If offsetParent is a body or html Tag and its position is not relative or absolute, offsetTop/Left is the vertical and horizontal distance between the upper Left corner of the outer border of the element border and the upper Left corner of the page. If the position of the body is relative or absolute, it is the vertical and horizontal distance between the upper left corner of the element border outer border and the upper left corner of the padding outer border of offsetParent. Note: The parameter umentElement. offsetParent is null.