[1]区分event对象中的[clientX,offsetX,screenX,pageX]
前言
在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置。
clientX clientY
event.clientX
event.clientY
client直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏、导航栏等等)。
event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。
兼容性:IE和主流游览器都支持。
offsetX offsetY
event.offsetX
event.offsetY
offset意为偏移量,是被点击的元素距左上角为参考原点的长度,而IE、FF和Chrome的参考点有所差异。
Chrome下,offsetX offsetY是包含边框的,如图所示。
而IE、FF是不包含边框的,如果鼠标进入到border区域,为返回负值,如图所示。
兼容性:IE9+,chrome,FF都支持此属性。
screenX screenY
event.screenX
event.sreenY
screen顾名思义是屏幕,是用来获取鼠标点击位置到屏幕显示器的距离,距离的最大值需根据屏幕分辨率的尺寸来计算。
兼容性:所有游览器都支持此属性。
pageX pageY
event.pageX
event.pageY
page为页面的意思,页面的高度一般情况client游览器显示区域装不下,所以会出现垂直滚动条。
鼠标距离页面初始page原点的长度。
在IE中没有pageX、pageY取而代之的是event.x、evnet.y。x和y在webkit内核下也实现了,所以火狐不支持x,y。
兼容性:IE不支持,其他高级游览器支持。
作者:Rin阳
链接:http://www.jianshu.com/p/a52077e8369d
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
最新文章
- Multi-armed Bandit Problem与增强学习的联系
- cocoapods 更新
- python基础-range用法_python2.x和3.x的区别
- overfit &; underfit
- poj 1222 EXTENDED LIGHTS OUT(位运算+枚举)
- 甲骨文公司 Oracle
- MFC 中的 “printf” 函数
- JDK1.5新特性随手记
- layout_gravity与gravity的区别
- LeetCode_Pascal's Triangle
- 4种Delphi IDE的调试时查看内存的方法,太酷了!
- html5 input type=";color";边框伪类效果
- Guava:好用的java类库 学习小记
- Core Java Fundation
- java.lang.Class<;T>; -- 反射机制及动态代理
- 学习笔记之Redis
- Android -- ViewPager、Fragment、状态保存、通信
- Rails 5 Test Prescriptions 第8章 Integration Testing with Capybara and Cucumber
- sublime text3最新版本注册码(build 3143)
- <;python数据挖掘入门与实战>;代码