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 存在陷阱 删除某一区域所有节点
May 10 Javascript
js自定义事件代码说明
Jan 31 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
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中“简单工厂模式”实例代码讲解
2012/09/04 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
理解Javascript_10_对象模型
2010/10/16 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
使用JS动态显示文本
2017/09/09 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
vue实现简单图片上传
2020/06/30 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
JavaScript中的几种继承方法示例
2020/12/06 Javascript
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
python适合做数据挖掘吗
2020/06/16 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
python性能测试工具locust的使用
2020/12/28 Python
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
护理自我鉴定范文
2013/10/06 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
反邪教学习心得体会
2016/01/15 职场文书
python基础之停用词过滤详解
2021/04/21 Python
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
python多线程方法详解
2022/01/18 Python
python实现学员管理系统(面向对象版)
2022/06/05 Python