JS magic Hall: Attributes of element location and mouse location

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.