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 相关文章推荐
newxtree.js代码
Mar 13 Javascript
javascript 清空form表单中某种元素的值
Dec 26 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
浅谈开发eslint规则
Oct 01 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 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
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php实现学生管理系统
2020/03/21 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
js触发select onchange事件的小技巧
2014/08/05 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
pandas如何处理缺失值
2019/07/31 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
服装店营销方案
2014/03/10 职场文书
个人综合鉴定材料
2014/05/23 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python
Python如何用re模块实现简易tokenizer
2022/05/02 Python
JS class语法糖的深入剖析
2022/07/07 Javascript