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乱码的一次解决过程 图解教程
Feb 20 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 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/04/24 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
回顾Javascript React基础
2019/06/15 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
python下载图片实现方法(超简单)
2017/07/21 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
幼儿园老师辞职信
2014/01/20 职场文书
2014年母亲节寄语
2014/05/07 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
新教师培训方案
2014/06/08 职场文书
春节超市活动方案
2014/08/14 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
python基础之while循环语句的使用
2021/04/20 Python
变长双向rnn的正确使用姿势教学
2021/05/31 Python
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python