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之网页换肤实现代码
Apr 30 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JavaScript中的关键字"VAR"使用详解 分享
2013/07/31 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
python一键升级所有pip package的方法
2017/01/16 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
销售简历自我评价
2014/01/24 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
推普周活动总结
2014/08/28 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
实训报告范文大全
2014/11/04 职场文书
公司员工安全协议书
2014/11/21 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
Spring Bean是如何初始化的详解
2022/03/22 Java/Android