JS Magic Hall: attributes on element position and mouse position

First, about the mouse position properties

1. The area that triggered the mouse event

The Border,padding,content area in the box model triggers mouse events, and clicking on the margin area will not trigger mouse events.

2. Properties under the Mouse event object MouseEvent

[A]. evt.pagex/y : The upper-left corner of the page is the reference point, indicating the horizontal and vertical distance of the current trigger point from the upper-left corner of the page.

Note: 1. Ie5.5~8 does not support this property, Polyfill method Pagex = ClientX + scrollleft

2. The upper-left corner of the page does not refer to the upper-left corner of the box for the HTML or body tag, but to the upper-left corner of document, which cannot be adjusted by CSS border.

[b]. evt.clientx/y : The upper-left corner of the visible area is the reference point, indicating the horizontal and vertical distance of the current trigger point from the upper-left corner of the viewable area.

Note: All browsers support

[c]. evt.offsetx/y : The upper-left corner of the DOM where the trigger point is located is the reference point, indicating the horizontal and vertical distance of the current trigger point from the upper-left corner of the DOM where the trigger point is located.

Note: 1. Chrome will be used as a reference point in the upper left corner of the Dom's border outer box;

2. Ie5.5~9 will be used as a reference point in the upper left corner of the content of the DOM;

3. FF does not support this property

[d]. evt.screenx/y : The upper-left corner of the screen is the reference point, indicating the horizontal and vertical distance of the current trigger point from the upper-left corner of the screen.

Note: All browsers support

[E]. evt.layerx/y : When the position of the DOM in which the trigger point resides is relative or absolute, the upper-left corner of the DOM's border outer border is used as the reference point, otherwise the upper-left corner of the page is the reference point ( Consistent with the Pagex).

Note: Ie5.5~8 does not support

Second, about the attributes of the element position

1. htmlelement.clientleft/top : The width of the left border of the element and the height of the border.

2. htmlelement.clientwidth/height : Element content+padding-The width or height of the scrollbar.

3. htmlelement.offsetwidth/height : The width or height of the element Content+padding+border.

4. htmlelement.scrollleft/top : The width or height of the element horizontal, vertical scroll bar cut off.

Note: FF in the standard mode, document.documentElement.scrollLeft/Top get the page scroll bar to cut off the part; In strange mode, it is used body.scrollLeft/Top to get

5. htmlelement.offsetparent : A recent ancestor element that has been positioned in CSS.

6. Htmlelement.offsettop/left : The vertical, horizontal distance of the upper-left corner of the outer border of the element border from the upper-left corner of the padding outer border of offsetparent. If offsetparent is a body or HTML tag, and the body's position is not relative or absolute, offsettop/left is the vertical, horizontal distance from the upper-left corner of the outer border of the element border to the upper left corner of the page. If the body's position is relative or absolute, it is the vertical, horizontal distance from the upper-left corner of the outer border of the offsetparent to the upper left of the border of the element.

Note: Under Ie,ff,chrome, the top offsetparent of the quirks mode and standard mode are the body elements, Both body.offsetparent and document.documentElement.offsetParent are null.

Iii. Summary

This is a basic knowledge when writing drag layers and Polyfill HTML5 feature placeholder, while reducing many unnecessary code.

Respect the original, reprint please indicate from: http://www.cnblogs.com/fsjohnhuang/p/3999186.html ^_^ Fat Boy John

JS Magic Hall: attributes on element position and mouse position