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技巧总结
Jan 01 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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 动态添加记录
2009/03/10 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
python re.match()用法相关示例
2021/01/27 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
简单而又朴实的个人求职信分享
2013/12/12 职场文书
高中生职业规划范文
2014/03/09 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
学生保证书
2015/01/16 职场文书
单独二胎证明
2015/06/24 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
javascript函数式编程基础
2021/09/15 Javascript
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis