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 相关文章推荐
jQuery学习5 jQuery事件模型
Feb 07 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
js a标签点击事件
Mar 30 Javascript
angular中的cookie读写方法
Aug 02 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
JS sort排序详细使用方法示例解析
Sep 27 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
destoon整合UCenter图文教程
2014/06/21 PHP
php编程每天必学之验证码
2016/03/03 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
Python中的super()方法使用简介
2015/08/14 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
python的文件操作方法汇总
2017/11/10 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
空指针到底是什么
2012/08/07 面试题
MIS软件工程师的面试题
2016/04/22 面试题
酒店管理专业学生求职信
2013/09/27 职场文书
通息工程毕业生自荐信
2013/10/16 职场文书
美术指导求职信
2014/03/17 职场文书
青年文明号服务承诺
2014/03/31 职场文书
个人党性锻炼总结
2015/03/05 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
小学中队委竞选稿
2015/11/20 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
Java 超详细讲解hashCode方法
2022/04/07 Java/Android