比较offsetX, pageX,clientX,screenX的区别
来源:互联网 发布:java 精确毫秒后6位 编辑:程序博客网 时间:2024/05/22 08:25
之前一直没有把offset,page,client和screen这几个属性弄得很清楚,今天花了点时间算是大体上了解了这几个属性的区别,所以把我了解到的写出来,也算是做个总结。
首先我们来看看这几个属性的解释:
1.offsetX:鼠标相对于事件源元素的X坐标,只有IE事件有这2个属性,标准事件没有对应的属性
2.pageX: 鼠标指针的位置,相对于文档的左边缘
3.clientX:返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。
4.screenX:返回事件发生时鼠标指针相对于屏幕的水平坐标。
光看这些文字说明可能不是很直观,反正我看这些的时候是一脸懵13
可能把这些属性都画在一张图上,能更直观
上图!上图!上图!
看到这张图后,我相信大家对offsetX,clientX,screenX都很明白了。
看到这些我相信大家都会有疑问,pageX呢?pageX去哪了?别急,我们现在就来讨论pageX。
当页面内容小于屏幕分辨率,即页面不能左右滑动时,pageX的值和clientX的值是一样的,只有在页面内容大于屏幕分辨率时,pageX和clientX的值就不一致了,这时的pageX值等于 事件源距离浏览器左边距的X轴距离加上滑动隐藏的距离
最后感谢这篇文字,看了之后让我受益匪浅:链接地址
0 0
- 比较offsetX, pageX,clientX,screenX的区别
- 比较offsetX, pageX,clientX,screenX的区别
- offsetX,clientX,screenX,pageX的比较小结
- screenX,clientX,pageX,offsetX,pageXoffset的区别
- pageX,clientX,screenX,offsetX区别
- pageX,clientX,screenX,offsetX区别
- pageX,clientX,screenX,offsetX区别
- clientX,offsetX,screenX,pageX区别
- screenX clientX pageX offsetX
- offsetX pageX clientX screenX
- screenx,pagex,clientx,offsetx
- clientX, pageX, offsetX, screenX
- javascript 中 x offsetX clientX screenX pageX的区别
- javascript event对象的clientX,offsetX,screenX,pageX区别
- javascript event对象的clientX,offsetX,screenX,pageX区别
- clientX,pageX,x,screenX,offsetX等的区别
- javascript event对象的clientX,offsetX,screenX,pageX区别
- 图解JavaScript event对象的clientX,offsetX,screenX,pageX区别
- python2-3.26
- asp.net使用ado连接数据库
- 1013. 数素数 (20)
- Java代理模式(cglib代理)
- 判断页面是否滚动到底部
- 比较offsetX, pageX,clientX,screenX的区别
- ASP横向输出和纵向输出PDF
- 扩展欧几里德算法 递归和非递归实现及证明
- Arduino教程汇总贴
- Java实现字符串大小写的转换并倒序输出
- 互联网广告系统综述一生态圈
- 前端面试题小探(1)
- 第三方邮箱登录126,163等服务器配置STMP
- 蓝牙串口设置