JavaScript obtains mouse absolute position program code

First, the analysis of event location properties in different browsers:

1. IE Event.x,event.y is the reference point (excluding the scrolling distance) from the outside of the parent element of the event triggering element.
2. Firefox's Event.pagex,event.pagey is based on the BODY element as the reference point (including scrolling distance)
3. Event.clientx,event.clienty to the top left corner of the browser (excluding scrolling distance)
4. IE's event.offsetx,event.offsety and Firefox's event.layerx,event.layery are the reference points in the upper-left corner of the event-triggering element (including scrolling distances, which may appear negative when there is a border).

And then the DOM object height attribute analysis

1. ScrollHeight: Gets the scrolling height of the object
2. ScrollLeft: Sets or gets the left distance between the left edge of the object and the current visible content in the window
3. ScrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window
4. ScrollWidth: Get the scrolling width of the object
5. Offsetheight: Gets the height of the object relative to the layout or the parent coordinates specified by the parent coordinate offsetparent property
6. Offsetleft: Gets the left position of the calculation of the object relative to the layout or the parent coordinates specified by the Offsetparent property
7. offsettop: Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop property

With the above analysis, write out the two function of taking position

The code is as follows

Copy Code

Take X axis position function MouseX (evt) { Firefox if (Evt.pagex) return evt.pagex; Ie else if (EVT.CLIENTX) return Evt.clientx + (Document.documentElement.scrollLeft document.documentElement.scrollLeft: Document.body.scrollLeft); else return null; } Take the y-axis position function Mousey (evt) { Firefox if (evt.pagey) return evt.pagey; Ie else if (evt.clienty) return Evt.clienty + (Document.documentElement.scrollTop document.documentElement.scrollTop: DOCUMENT.BODY.SCROLLTOP); else return null; }

Two ways to get the absolute position of an HTML control

The code is as follows	Copy Code
function Getabspoint (e) { var x = e.offsetleft, y = e.offsettop; while (E = e.offsetparent) { x + + E.offsetleft; Y + + e.offsettop; } Alert ("x:" + x + "," + "y:" + y); } function Getabspoint (obj) { var x, y; Orect = Obj.getboundingclientrect (); x = Orect.left y = orect.top Alert ("+ x +", "+ y +")) }

Attention

The

Document.body.scrollleft,document.body.scrolltop is used only for IE6 previous versions, in IE6, for declaring DOCTYPE, or declaring transitional DOCTYPE, Then IE6 will use Document.documentElement.scrollLeft to get the absolute position of the mouse