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 类定义的4种方法
Sep 12 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 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安全开发库中文详细介绍
2015/03/22 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
简单解决Python文件中文编码问题
2015/11/22 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Python换行与不换行的输出实例
2020/02/19 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
外贸业务员工作职责
2014/01/06 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
监察建议书格式
2014/05/19 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸