It's better to understand that (PAGEX,PAGEY,CLIENTX,CLIENTY,EVENTX,EVENTY,SCROLLX,SCROLLY,SCREENX,SCREENY,EVENT.OFFSETX, Event.offsety,offsetleft,style.left)

1 Pagex,pagey: The calculation area includes the control and scroll bars of the window itself relative to the x, Y coordinates of the current window. (Unique to Firefox)

2 Event.clientx,event.clienty: The mouse pointer is different from the x, y coordinates of the current window, and the page differs from the control and scroll bars of the window itself, which are not included in the calculation area.

3 event. X and Event.y: Sets or gets the x, y pixel coordinates of the position of the mouse pointer relative to the parent document in relation to the current window (unfortunately Firefox does not support it, and there is no way to regret it).

4 scrollx,scrolly: Words too literally, relative to the browser, varies with the scroll bar movement.

5 Screenx,screeny: When an event occurs, the mouse pointer is relative to the horizontal and vertical coordinates of the screen (the position of the upper-left corner of the screen) (this is related to the screen size, but IE does not support this property, read-only properties)

6 for 5, IE is used screenleft and screentop (equal to screeny+ toolbar + address bar of pixels). Words to the mouth, say again innerwidth innerheight Bar, hey, he two is the window document display area width, does not include the border and the scroll bar, this property is readable writable.

7 event.offsetx,event.offsety: Sets or gets the x-coordinate of the position of the mouse pointer relative to the object that triggered the event. (the element that triggers the event, Ie,chrome supports this property, Firefox does not support it)

8 offsetleft: It is worth noting that this property is not a property of the event object, he is all of the DOM object, and gets the left margin relative to the parent object. This property represents the location of the DOM object in "the DOM object's closest to the object in its hierarchical relationship, setting the parent object of position", although that is true, but different browsers do not work the same way, but in Ie6/7, This property returns the location of the DOM object in its immediate parent object, but IE8 corrects the problem, but IE8 has a new problem, and the other browsers are positioned from the upper-left corner of the parent object's content area, IE8 from the upper-left corner of the parent element's border. Because the test environment is IE8 in IETester, the problem of IETester cannot be ruled out.

9 Style.left: Gets the left margin relative to the parent object with a positional property (position defined as relative).

10 9 is read-write, 8 is read-only, so to change the position of the div, you can only modify the Style.left. and the value of 9 needs to be predefined in HTML. 8 You don't need to define the div's position beforehand

Write here First ~ Welcome to the correction of the Groove and supplement ~

It's better to understand that (PAGEX,PAGEY,CLIENTX,CLIENTY,EVENTX,EVENTY,SCROLLX,SCROLLY,SCREENX,SCREENY,EVENT.OFFSETX, Event.offsety,offsetleft,style.left)