clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别
2015-10-09 17:40
309 查看
因为最近在做web方面的东西,发现一个简单的pageX 在iPhone上的微信内置浏览器是起作用的,而在Android手机上的微信内毫无作用。所以就去查了下。把常用的区别列下,减少以后其他同仁走我的弯路。
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的问题。
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的问题。
相关文章推荐
- 初识TC套接字
- 将Microsoft Ajax Minifier集成到VS2013对JS、CSS进行编译时压缩
- linux安装和配置 mysql、redis 过程中遇到的问题记录
- python string format笔记
- mysql 数据库连接池的 java 实现
- jQuery 源码 data 数据缓存
- jQuery.form 的最新版本是 3.14
- gpio模拟mdc/mdio通信
- Windows Server 2008的一些安全设置
- andorid 实践2015-8-28
- android Activity 自动弹出键盘解决方案
- 第一篇~
- javah 找不到 Android 系统类
- objdump
- 伪集群zookeeper模式下codis的部署安装
- 【leetcode c++】125 Valid Palindrome
- android 实践-2015-8-21
- php sprintf函数 功能很强大滴
- cortex A8/A9/A5/A15 智能手机名称整理
- 项目整体管理以及项目范围管理知识重点