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 tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
页面中iframe相互传值传参
Dec 13 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
angular分页指令操作
Jan 09 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
vue实现全选、反选功能
Nov 17 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
Node.js Buffer用法解读
May 18 Javascript
JS中的模糊查询功能
Dec 08 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
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/08/05 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
Python的UTC时间转换讲解
2019/02/26 Python
python使用建议技巧分享(三)
2020/08/18 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
八一建军节活动方案
2014/02/10 职场文书
地球一小时倡议书
2014/04/15 职场文书
开学典礼演讲稿
2014/05/23 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python