clientX、offsetX、screenX、pageX的区别
一、概念总结
1、event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。
2、event.pageX、event.pageY
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。pageX指鼠标在页面上的位置，以页面左侧为参考点。在页面没有滚动的情况下， pageX 和 pageY 的值与 clientX 和 clientY 的值相等。
3、event.offsetX、event.offsetY
鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
4、event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。screenX : 鼠标在屏幕中的位置，指的是鼠标到电脑屏幕左侧的距离。例如：当网页缩小，拖动到屏幕中间时，screnX 大于 clientX .
5、event.layerX ,event.layerY
FireFox特有，是相对于父元素的位置，鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了positio的父元素”的边界的位置，从border的左上角开始定位，即如果这个父元素存在border，则坐标原点在border的左上角，而不是内容区域的左上角。
6、event.x,event.y
到可视区域的距离，FireFox不识别,有无滚动条相同，同clientX。
二、图示分析
1、clientX、offsetX、screenX、pageX的区别：
2、clientX、offsetX、screenX的区别：
1、clientX、offsetTop、offsetLeft、offsetWidth、offsetHeight的区别：
clientX、offsetX、screenX、pageX的区别相关推荐
- 区分event对象中的[clientX,offsetX,screenX,pageX]
前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientX eve ...
- 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
先总结下区别:event.clientX.event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性event. ...
- 2022-03-27 screenX和clientX的区别以及offsetX和pageX的区别
1.screenX和clientX的区别 screenX是电脑显示器原点(显示器左上角)到鼠标点击位置的距离 clientX是可视化窗口原点(网页左上角)到鼠标点击位置的距离 2.offsetX和pa ...
- javascript 中 x offsetX clientX screenX pageX的区别
在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, cli ...
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
- clientX,screenX,pageX,offsetX的区别
前言 关于clientX,screenX,pageX,offsetX的区别之前也比较迷糊,然后自己写了几个demo算是弄明白了,在这记录一下. 定义 一.clientX.clientY 点击位置距离当 ...
- pageX,clientX,offsetX,layerX的区别
在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个 ...
- clientX,offsetX,pageX,screenX的异同以Chrome浏览器测试
clientX,offsetX,pageX,screenX的异同 对于这个问题我相信有不少刚刚学习DOM事件的小伙伴可能会比较懵逼,首先我们从文字上解释它的异同 首先我们要明确对于浏览器而言,它的X还 ...
- js 事件回调函数的对象属性说明：clientX、screenX、offsetX、pageX
clientX 鼠标相对于浏览器左上角x轴的坐标: 不随滚动条滚动而改变: clientY 鼠标相对于浏览器左上角y轴的坐标: 不随滚动条滚动而改变: pageX 鼠标相对于浏览器左上角x轴的坐标: ...
最新文章
- 重磅！Facebook更新PyTorch 1.1，打算跨GPU分割神经网络
- ubuntu sudoers配置错误
- 解读JavaScript代码 var ie = !-[1,]
- 使用C#开发ActiveX控件[Obsolete]
- 深度学习：卷积神经网络（convolution neural network）
- intellij工程文件名都是红色+右键没有run选项
- vue上传文件php,php文件上传 – 前端开发，JQUERY特效，全栈开发，vue开发
- Spring Boot中使用Spring-data-jpa让数据访问更简单、更优雅
- Python入门基础篇（五）字符串的正则表达式re模块，全面解析！！！
- mysql登录报错error1045,mysql创建登录报错ERROR1045(28000)
- 在CentOS4上安装JMagick
- eclipse下载及安装教程
- 2022年7月国产数据库大事记-墨天轮
- 旧手机改文件储存服务器,旧手机改成云服务器
- hudi系列-文件压缩（compaction）
- Nginx反向代理解决跨域问题（个人学习总结）
- windows下查看硬盘序列号、设备序列号、操作系统版本和安装时间、系统启用时间等命令
- java向飞秋发文件_飞秋如何发文件夹
- 频率选择性衰落和频率非选择性衰落
- [2018 CS:GO Client]2018 Old CSGO 客户端，回忆逝去的青春！