JavaScript取得鼠标绝对位置程序代码介绍


Posted in Javascript onSeptember 16, 2012

首先不同浏览器中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 来获取鼠标的绝对位置

Javascript 相关文章推荐
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
js隐式转换的知识实例讲解
Sep 28 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 #Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 #Javascript
javascript时区函数介绍
Sep 14 #Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 #Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 #Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 #Javascript
JQuery select控件的相关操作实现代码
Sep 14 #Javascript
You might like
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
用js重建星际争霸
2006/12/22 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python3 Random模块代码详解
2017/12/04 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
python pandas修改列属性的方法详解
2018/06/09 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
耐克亚太地区:Nike APAC
2019/12/07 全球购物
火车来了教学反思
2014/02/11 职场文书
干部个人对照检查材料
2014/08/25 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
个人年终总结结尾
2015/03/06 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript