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 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
angularjs指令之绑定策略(@、=、&)
Apr 13 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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 无限极分类
2008/03/27 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
python发送邮件接收邮件示例分享
2014/01/21 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
Django权限机制实现代码详解
2018/02/05 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
医院门卫岗位职责
2013/12/30 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
经理任命书模板
2014/06/06 职场文书
食品工程专业求职信
2014/06/15 职场文书
新闻通讯稿模板
2015/07/22 职场文书