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 Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
微信小程序列表中item左滑删除功能
Nov 07 Javascript
JavaScrip数组去重操作实例小结
Jun 20 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创建动态图像
2006/10/09 PHP
PHP脚本的10个技巧(7)
2006/10/09 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
php 数组元素快速去重
2017/05/05 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
浅析Prototype的模板类 Template
2011/12/07 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
js 调用百度分享功能
2017/02/27 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
python简单获取数组元素个数的方法
2015/07/13 Python
python学习 流程控制语句详解
2016/06/01 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
python实现logistic分类算法代码
2020/02/28 Python
如何真正的了解python装饰器
2020/08/14 Python
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
《美丽的彩虹》教学反思
2014/02/25 职场文书
一年级学生评语
2014/04/23 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
JS实现九宫格拼图游戏
2022/06/28 Javascript