clientX,offsetX,screenX,pageX 区别!
先总结下区别:
event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
event.pageX、event.pageY
类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。
event.offsetX、event.offsetY
鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
上图!!!!

clientX,offsetX,screenX,pageX 区别!的更多相关文章
- 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...
- event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等
先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 eve ...
- event对象的clientX,offsetX,screenX,pageX
chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clie ...
- [1]区分event对象中的[clientX,offsetX,screenX,pageX]
前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientXeven ...
- pageX,clientX,offsetX,layerX的区别
pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...
- clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解
clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考. Chrome下(测试版本为51.0.2704.106 ...
- offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解
一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...
- pageX,clientX,offsetX,screenX,offsetLeft,style.left,offsetWidth,scrollWidth的区别以及使用详解
https://www.cnblogs.com/echolun/p/9231760.html
- jQuery中 pageX,clientX,offsetX,layerX的区别
一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0 ...
随机推荐
- Leetcode 15
//用类似双指针的方法,确定第一个i的位置后,j和k向左向右移动使nums[j]+nums[k] = -nums[i];注意特判 class Solution { public: vector< ...
- PHP与Java集成开发详解(一)
很久以前,有人从www上看到看到天空上一个很亮的亮点,它就是Java语言,与此同时,在另一个地方一位梦想家也看到了一个亮点,它就是PHP. 时间一天天过去,这两个亮点也变得越来越亮,很快,它们受到了编 ...
- poj 1789 Truck History 最小生成树 prim 难度:0
Truck History Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 19122 Accepted: 7366 De ...
- 高可用数据采集平台(如何玩转3门语言php+.net+aauto)
同类文章:高并发数据采集的架构应用(Redis的应用) 吐槽下:本人主程是PHP,团队里面也没有精通.net的人才,为了解决这个平台方案,还是费了一部分劲. 新年了,希望有个新的开始.技术+团队管理都 ...
- Failed to start Docker Application Container
[root@localhost ~]# systemctl status docker.service ● docker.service - Docker Application Container ...
- Microsoft Office 2010 Service Pack 2 发布更新
Microsoft Office 2010 32 位版本 的 Service Pack 2 (SP2) 包含的新更新可以提高安全性.性能和稳定性.此外,SP 是以前发布的所有更新的汇总. 下载更新补丁 ...
- 201621123005《Java程序设计》第六次学习总结
201621123005<java程序设计>第六周学习总结 1.本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对 ...
- 实现斐波拉契数列的四种方式python代码
斐波那契数列 1. 斐波拉契数列简介 斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引 ...
- python多任务的导包问题
多线程的使用: import threading def func(x): print(x) t= threading.Thread(target=func,args=(12,)) # 线程启动 t. ...
- linux提权辅助工具(二):linux-exploit-suggester-2.pl
来自:https://github.com/jondonas/linux-exploit-suggester-2/blob/master/linux-exploit-suggester-2.pl #! ...