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的deferred对象使用详解
Aug 20 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
JS搜狐面试题分析
Dec 16 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 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实现百度网盘图片直链的代码分享
2012/11/01 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
PHP asXML()函数讲解
2019/02/03 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
Python中的Numpy入门教程
2014/04/26 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
python中的列表与元组的使用
2019/08/08 Python
Python二元赋值实用技巧解析
2019/10/25 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
北承题目(C++)
2012/05/16 面试题
会计毕业生自我鉴定
2013/11/04 职场文书
影视制作岗位职责
2013/12/04 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书