clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析


Posted in Javascript onMarch 12, 2010

screenX:鼠标在显示屏幕上的坐标。
clientX:鼠标在页面显示区域的坐标。
注:以上两个都是各浏览器通用的。

pageX:FF特有,鼠标在页面上的位置,从页面左上角开始定位,这个可以很方便在整个页面上进行定位,IE没有直接替换的属性。
layerX:FF特有,鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从border的左上角开始定位,即如果这个父元素存在border,则坐标原点在border的左上角,而不是内容区域的左上角。
offsetX:IE特有,鼠标相对于“触发事件的元素”的位置,从内容区域左上角开始定位,不是从border左上角开始!这个属性比较好用,用来判断鼠标点在一个元素中的哪个位置很方便,FF没有直接替换的属性。
x:IE特有,跟layerX一个效果,可作为layerX的直接替换属性。
注:IE和FF的定位有个1px的差别,实际上,IE的定位从0开始,FF的定位从1开始,FF永远会比IE大1px,需要根据实际情况处理。

offsetLeft:这个属性不是事件对象的属性,而是DOM对象所有的,该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的,设置了position的父对象”中的位置,虽然话是这么说的,但是不同的浏览器效果不一样,FF中严格按上述说明执行,但是在IE6/7中,这个属性返回该DOM对象在其直接父对象中的位置,但是IE8改正了这个问题,不过IE8又有了一个新问题,其他的浏览器都是从父对象的内容区域的左上角开始定位,IE8确是从父元素的border的左上角开始定位,由于测试环境为IETester中的IE8,不能排除是IETester的问题。

Javascript 相关文章推荐
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
浅谈javascript错误处理
Aug 11 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
JavaScript 对象创建的3种方法
Nov 17 Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 #Javascript
javascript offsetX与layerX区别
Mar 12 #Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 #Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 #Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 #Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 #Javascript
jquery 简单的进度条实现代码
Mar 11 #Javascript
You might like
有关php运算符的知识大全
2011/11/03 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
vue计算属性get和set用法示例
2019/02/08 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
Python获取文件ssdeep值的方法
2014/10/05 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
python实现分页效果
2017/10/25 Python
django实现用户登陆功能详解
2017/12/11 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
八年级语文教学反思
2014/02/11 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
材料员岗位职责
2015/02/10 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
Python数据分析之pandas函数详解
2021/04/21 Python
详解运行Python的神器Jupyter Notebook
2021/06/03 Python