首先不同浏览器中event位置属性的分析: 1. IE的event.x,event.y是以事件触发元素的父元素外界为参考点(不包括滚动距离) 2. Firefox的event.pageX,event.pageY是以body元素为参考点(包括滚动距离) 3. event.clientX,event.clientY以浏览器左上角为参考点(不包括滚动距离) 4. IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件触发元素内界的左上角为参考点(包括滚动距离,当有边框时,可能出现负数) 然后是DOM对象高度属性分析 1. scrollHeight: 获取对象的滚动高度 2. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 3. scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 4. scrollWidth:获取对象的滚动宽度 5. offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 6. offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 7. offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 有了以上分析，写出两个取位置的函数 复制代码 代码如下: // 取X轴位置 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; } // 取Y轴位置 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; } 获取Html控件的绝对位置的两种方法 复制代码 代码如下: 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 + ")") } 注意 document.body.scrollLeft，document.body.scrollTop只用于IE6以前的版本，在IE6中，对没有宣告 DOCTYPE,或者宣告的是transitional DOCTYPE，那么IE6将使用document.documentElement.scrollLeft 来获取鼠标的绝对位置

　　推荐阅读

　　jQuery学习笔记 更改jQuery对象

jQuery代码的任务就是生成jQuery对象A，操作jQuery对象A；生成jQuery对象B，操作jQuery对象B……但是若此过程中，对象A、B……之间有某种关系，那么完全没必要一个个去$(selector)，这很繁琐的。因此jQuery提供了一>>>详细阅读

本文标题：JavaScript取得鼠标绝对位置程序代码介绍

地址：http://www.17bianji.com/kaifa2/JS/23090.html

 1/2    1