JavaScript取得鼠标绝对位置程序代码介绍
更新时间：2012年09月16日 02:19:04 作者：
文章介绍了关于JavaScript在不同浏览器下取得鼠标绝对位置相关函数用法及兼容性介绍，有需要的同学可参考一下
首先不同浏览器中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 来获取鼠标的绝对位置
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 来获取鼠标的绝对位置
相关文章
本文给大家带来JS中判断某个字符串是否包含另一个字符串的五种方法，有string对象的方法，match() 方法，RegExp对象的方法，test() 方法，exec() 方法，具体内容详情大家参考下本文2018-05-05
这篇文章主要介绍了Javascript操作表单实例讲解（下）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要为大家介绍了ECharts实现数据超出Y轴最大值max但不隐藏实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了JavaScript实现的DOM绘制柱状图效果,涉及javascript数值计算及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了js中关于require与import的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了js倒计时简单实现方法，方便一些提示重要日期的来临，本实例特别适合用于商品倒计时抢购活动，感兴趣的小伙伴们可以参考一下2015-12-12
轨迹拖动（拖影效果）2010-06-06
这篇文章主要是对几种设置表单元素中文本输入框不可编辑的方法进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
众所周知正则表达式非常强大,下面这篇文章主要给大家介绍了关于如何使用js正则表达式验证文件夹名是否符合规范的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了js获取字符串字节数方法,实例总结了javascript字符串长度计算的相关技巧,需要的朋友可以参考下2015-06-06
最新评论