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模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
AngularJS表单验证功能
Oct 19 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
Dec 22 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
对Python3 序列解包详解
2019/02/16 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
物流毕业生个人的自我评价
2014/02/13 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
保护环境倡议书100字
2014/05/19 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android