Introduction to JavaScript program code for obtaining the absolute position of the mouse

Introduction to JavaScript program code for obtaining the absolute position of the mouse_javascript skills

WBOY

Release： 2016-05-16 17:49:59

Original

1150 people have browsed it

First of all, analysis of event position attributes in different browsers:

1. IE’s event.x, event.y are based on the outside world of the parent element of the event triggering element as the reference point (excluding scrolling distance)
2. Firefox’s event.pageX, event.pageY takes the body element as the reference point (including scrolling distance)
3. event.clientX, event.clientY takes the upper left corner of the browser as the reference point (not Including scrolling distance)
4. IE's event.offsetX, event.offsetY and Firefox's event.layerX, event.layerY take the upper left corner of the inner bounds of the event triggering element as the reference point (including scrolling distance, when there is a border, Negative numbers may appear)

Then DOM object height attribute analysis

1. scrollHeight: Get the scroll height of the object
2. scrollLeft: Set or get the object located The distance between the left border and the leftmost end of the currently 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: Gets the object The scroll width
5. offsetHeight: Gets the height of the object relative to the layout or the parent coordinate specified by the offsetParent property
6. offsetLeft: Gets the calculated left side of the object relative to the layout or the parent coordinate specified by the offsetParent property Side position
7. offsetTop: Get the calculated top position of the object relative to the layout or the parent coordinate specified by the offsetTop attribute

With the above analysis, write two functions to get the position

Copy code The code is as follows:

 
// Get the 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; 
} 
// Get 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 methods to get the absolute position of the Html control

Copy code The 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 ")") 
} 

Attention

document.body .scrollLeft, document.body.scrollTop are only used in versions before IE6. In IE6, if no DOCTYPE is declared, or a transitional DOCTYPE is declared, then IE6 will use document.documentElement.scrollLeft to obtain the absolute position of the mouse.