事件clientX、pageX、screenX、offsetX
clientX、clientY：点击位置距离当前body可视区域的x，y坐标
可以理解为距离浏览器窗口的距离，但注意这里不包括浏览器的导航栏距离只是浏览器内容区域。
pageX、pageY：对于整个页面来说，包括了被卷去的body部分的长度
相对于文档边缘,包含滚动条距离
screenX、screenY：点击位置距离当前电脑屏幕的x，y坐标
offsetX、offsetY：相对于带有定位的父盒子的x，y坐标
clientX：在水平方向上，鼠标指针距离浏览器左侧边缘的距离。（不包含滚动条）
pageX：在水平方向上，鼠标指针距离网页文档X轴左侧边缘的距离。（包含滚动条）
offsetX：在水平方向上，鼠标指针距离鼠标所在元素左侧边缘的距离。
screenX：在水平方向上，鼠标指针距离电脑屏幕左侧边缘的距离。
clientY：在垂直方向上，鼠标指针距离浏览器上面边缘的距离。（不包含滚动条）
pageY：在垂直方向上，鼠标指针距离网页文档Y轴上面边缘的距离。（包含滚动条）
offsetY：在垂直方向上，鼠标指针距离鼠标所在元素上面边缘的距离。
screenY：在垂直方向上，鼠标指针距离电脑屏幕上面边缘的距离。
事件clientX、pageX、screenX、offsetX相关推荐
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
- Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）
简介 因为实际开发中,很少用到event对象的这几个值,每当写的时候又记不清,然后就要浪费时间去查找准确的资料,很是不爽,所以就做个记录~话不多说,直接上图(ps:图是网上找的,如果侵权,可立马删除) ...
- event对象的offsetX, clientX, pageX, screenX
现在需要对event对象的几大与坐标有关的属性做一个总结,以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内,不包括bor ...
- html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别
1.offsetX offset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border. 2.clientX 事件对象相对于浏览器窗口可视区域的X ...
- 一张图看懂offsetX, clientX, pageX, screenX的区别
1.具体含义见下图1 2.浏览器的兼任情况 更多专业前端知识,请上 [猿2048]www.mk2048.com
- clientX,pageX,screenX，offsetLeft，scrollTop
这个东西,以为理解了,今天彻底弄弄. clientX 观点:鼠标相对于WINDOWS的坐标. 这里这个WINDOWS是指我们能看见的浏览器大小.所以不可能超过显示器的大小,如 screen.width ...
- 【鼠标事件 MouseEvent】clientX clientY offsetX offsetX pageX screenX screenY
鼠标事件 MouseEvent 对象,下clientX clientY offsetX offsetX pageX screenX screenY 定义转自 MDNMouseEvent MouseEv ...
- js 事件回调函数的对象属性说明：clientX、screenX、offsetX、pageX
clientX 鼠标相对于浏览器左上角x轴的坐标: 不随滚动条滚动而改变: clientY 鼠标相对于浏览器左上角y轴的坐标: 不随滚动条滚动而改变: pageX 鼠标相对于浏览器左上角x轴的坐标: ...
- pageX、clientX、screenX、offsetX、layerX、x
参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标 e.layerX- ...
- clientX,offsetX,pageX,screenX的异同以Chrome浏览器测试
clientX,offsetX,pageX,screenX的异同 对于这个问题我相信有不少刚刚学习DOM事件的小伙伴可能会比较懵逼,首先我们从文字上解释它的异同 首先我们要明确对于浏览器而言,它的X还 ...
最新文章
- 关于Basware的使用随想
- bootstrap回顾
- 最长公共前缀(java实现)
- truncate与delete的区别
- python判断字母大写_python判断字符串是字母 数字 大小写（转载）
- 新媒体营销操作手法及案例分享-初贵民
- ZOJ3778 Talented Chef（贪心）
- linux 安装weblogic12.1.3.0步骤
- 菜鸟学习oracle一看就会
- 各种loading加载中gif图标
- qq空间把android改成iphone,qq空间利用代码修改iPhone6 Plus详细方法 qq空间修改手机型号教程...
- PMP工具之三点估算
- 假期培训总结——初三寒假
- 记一次任意用户密码重置漏洞(session覆盖)
- 安全加密与证书签发工具--openssl
- 繁荣国家数学教育，坚持“知识共享”许可原则
- 什么是同类群组联合学习 (FLoC)？
- 你还分不清谐波失真、总谐波失真、总谐波失真加噪声吗？
- ansible 高级自动化变量及变量过滤器
- autohotkey 双击桌面隐藏图标