The Clientx,offsetx,screenx,pagex of the event object

Source: Internet
Author: User

Chrome:

e.pagex--coordinates relative to the entire page

e.layerx--coordinates starting at the upper-left corner of the border relative to the current coordinate system

e.offsetx--coordinates starting at the upper-left corner of the border relative to the current coordinate system

e.clientx--coordinates of the relative visible area

e.x--coordinates of the relative visible area

Ff:

e.pagex--coordinates relative to the entire page

e.layerx--coordinates starting at the upper-left corner of the border relative to the current coordinate system

e.offsetx--None

e.clientx--coordinates of the relative visible area

e.x--None

Opera

e.pagex--coordinates relative to the entire page

e.layerx--None

e.offsetx--coordinates of the upper-left corner of the content area relative to the current coordinate system

e.clientx--coordinates of the relative visible area

e.x--coordinates of the relative visible area

Safari: (This is the same as chrome)

e.pagex--coordinates relative to the entire page

e.layerx--coordinates starting at the upper-left corner of the border relative to the current coordinate system

e.offsetx--coordinates starting at the upper-left corner of the border relative to the current coordinate system

e.clientx--coordinates of the relative visible area

e.x--coordinates of the relative visible area

IE9:

e.pagex--coordinates relative to the entire page

e.layerx--the coordinates of the upper-left corner of the border relative to the current coordinate system + the distance the scrollbar rolls over (this NB is a roaring = =

e.offsetx--coordinates of the upper-left corner of the content area relative to the current coordinate system

e.clientx--coordinates of the relative visible area

e.x--starts at the upper-left corner of the border relative to the current coordinate system

IE8:

e.pagex--None

e.layerx--None

e.offsetx--coordinates of the upper-left corner of the content area relative to the current coordinate system

e.clientx--coordinates of the relative visible area

e.x--starts at the upper-left corner of the border relative to the current coordinate system

IE7:

e.pagex--None

e.layerx--None

e.offsetx--coordinates of the upper-left corner of the content area relative to the current coordinate system

e.clientx--coordinates of the relative visible area

e.x--starts at the upper-left corner of the border relative to the current coordinate system

IE6:

e.pagex--None

e.layerx--None

e.offsetx--coordinates of the upper-left corner of the content area relative to the current coordinate system

e.clientx--coordinates of the relative visible area

e.x--starts at the upper-left corner of the border relative to the current coordinate system

2.PageX and Clientx Pagex refers to the position of the mouse on the page, to the left of the page is the reference point Clientx refers to the distance from the left side of the visible area, the scroll bar to scroll to the position of the reference point. Each browser is the same. That is, when there is a scrollbar, clientx is less than PageX

ie678 does not recognize Pagex pagey=clienty+scrolltop-clienttop, (only the y-axis, the x-axis, the same as the same) position on the page = viewable area position + page ScrollBar cut to height-self-border height, or directly relatively clear

3, ScreenX mouse in the screen position, refers to the mouse to the computer screen to the left of the distance. Each browser is the same. The difference from Clientx is that Clientx is the distance to the browser. For example: When the page is zoomed out and dragged to the middle of the screen, Screnx is greater than ClientX

4, OffsetX and Layerx in order to be compatible with the browser, Layerx is FF, chrome identification, OFFSETX is except FF.

If the trigger element is set to position, then offsetx equals Layerx If the page has scroll bars, add a scrolling distance.

LAYERX:FF is unique, relative to the parent element's position, the mouse relative to "the element of the triggering event is closest to that element in the hierarchical relationship, set the position parent element" the position of the boundary, starting from the upper left corner of border, that is, if the parent

element exists border, the coordinate origin is in the upper-left corner of the border, not the upper-left corner of the content area. Offsetx:ie unique, the mouse relative to the "trigger event element" position, from the upper left corner of the content area to start positioning, not from the upper left corner of the border! This property is useful for determining where the mouse point is in an element, FF

There are no directly substituted properties.

The Clientx,offsetx,screenx,pagex of the event object

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.