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 相关文章推荐
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 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
php长字符串定义方法
2012/07/12 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
python+mysql实现教务管理系统
2019/02/20 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
Python 发送邮件方法总结
2020/08/10 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
Weblogc domain问题
2014/01/27 面试题
2014年教师节寄语
2014/08/11 职场文书
售后服务承诺函格式
2015/01/21 职场文书
计划生育目标责任书
2015/05/09 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
Python的property属性详细讲解
2022/04/11 Python