JavaScript code for getting the absolute mouse position

First, analyze the event location attributes in different browsers:

1. The event. x and event. y of IE are the reference points (excluding the rolling distance) of the parent element of the event trigger element)
2. The event. pageX and event. pageY of Firefox take the body element as the reference point (including the rolling distance)
3. event. clientX, event. clientY takes the upper-left corner of the browser as the reference point (excluding the rolling distance)
4. IE event. offsetX, event. offsetY and Firefox events. layerX, event. layerY uses the upper left corner of the event-triggered element's inner boundary as the reference point (including the scroll distance. When there is a border, a negative number may occur)

Then the DOM object height Attribute Analysis

1. scrollHeight: get the scroll height of the object
2. scrollLeft: sets or obtains the distance between the left edge of the object and the leftmost end of the currently visible content in the window.
3. scrollTop: set or obtain the distance between the top of the object and the top of the visible content in the window.
4. scrollWidth: gets the scroll width of an object.
5. offsetHeight: gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.
6. offsetLeft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute.
7. offsetTop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetTop attribute.

With the above analysis, write two functions that take positions.
Copy codeThe Code is as follows:
// Take the X axis
Function mouseX (evt ){
// Firefox
If (evt. pageX) return evt. pageX;
// IE
Else if (evt. clientX)
Return evt. clientX + (document.doc umentElement. scrollLeft? Document.doc umentElement. scrollLeft: document. body. scrollLeft );
Else return null;
}
// Take the Y axis
Function mouseY (evt ){
// Firefox
If (evt. pageY) return evt. pageY;
// IE
Else if (evt. clientY)
Return evt. clientY + (document.doc umentElement. scrollTop? Document.doc umentElement. scrollTop: document. body. scrollTop );
Else return null;
}

Two methods to obtain the absolute position of an Html Control
Copy codeThe Code is as follows:
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 + ")")
}


Note:

Document. body. scrollLeft, document. body. scrollTop is only used in versions earlier than IE6. in IE6, if DOCTYPE is not declared or transitional doctypeis declared, ie6will use document.doc umentElement. scrollLeft to obtain the absolute position of the mouse