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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
使用console进行性能测试
Apr 27 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
linux中cd命令使用详解
2015/01/08 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
webpack入门必知必会
2017/01/16 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
go语言计算两个时间的时间差方法
2015/03/13 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
Python转换字典成为对象,可以用"."方式访问对象属性实例
2020/05/11 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
How to spawning asynchronous work in J2EE
2016/08/29 面试题
岗位职责的构建方法
2014/02/01 职场文书
北京申奥口号
2014/06/19 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
婚礼答谢词
2015/01/04 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
安全教育主题班会总结
2015/08/14 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers