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 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
javascript优先加载笔记代码
Sep 30 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
如何利用js在两个html窗口间通信
Apr 27 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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
jquery map方法使用示例
2014/04/23 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
详解Python用三种方式统计词频的方法
2019/07/29 Python
python实现猜拳小游戏
2020/04/05 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
估算杭州有多少软件工程师
2015/08/11 面试题
网上快餐厅创业计划书
2014/02/01 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
工程技术员岗位职责
2015/04/11 职场文书
论文评审意见
2015/06/05 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL