对于clientX、clientY、offsetX、offsetY、pageX、pageY的理解

最新推荐文章于 2023-11-17 01:55:00 发布
最新推荐文章于 2023-11-17 01:55:00 发布
阅读量1.1k 收藏 3
点赞数 1
分类专栏： 前端 文章标签： js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41445106/article/details/96191627
版权
对于clientX、clientY、offsetX、offsetY、pageX、pageY的理解

首先声明一下这几个都是和事件相关的属性
1.clientX、clientY属性：鼠标在可视区X坐标和Y坐标，即距离左边框和上边框的距离
2.screenX、screenY属性：鼠标在屏幕区X坐标和Y坐标，即距离左屏幕和上屏幕的距离
3.offsetX、offsetY属性：鼠标相对于事件源的X坐标和Y坐标
4.pageX、pageY：鼠标相对于文档的X坐标和Y坐标

offsetX和pageX在没有滚动条出现时是相等的，有滚动条时不相等

浅浅呐
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
pageX/pageY、clientX/clientY、screenX/screenY的区别
cai_niao5623的博客
10-15 2294
在触发鼠标事件的时候会传一个event参数，在这个参数中我们可以获得pageX/pageY、clientX/clientY、screenX/screenY，但是这几个属性有啥区别呢？看下图 screenX/screenY：其实就是你的鼠标指针距离你电脑屏幕左侧边缘和上侧边缘的距离 clientX/clientY：其实就是你的鼠标指针距离当前网页最左侧和最上侧的距离(不包含滚动条的距离) pageX/pageY：其实就是你的鼠标指针距离当前网页最最侧和最上侧的距离(包含滚动条的距离) ...
鼠标位置的获取pageX，pageY，screenX，screenY，clientX，和clientY，offsetX ，offsetY，layerX，layerY的使用 和 区别
manba
03-31 1万+
pageX，pageY，screenX，screenY，clientX，和clientY返回一个数，其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。 1、pageX和pageY： 相对于浏览器中完全呈现内容区域的左上角。此参考点位于左上角的URL栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置， 并且如果在...
图解offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别
逆风优雅的博客
06-10 5103
offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说，我给黄色的盒子定义一个点击事件，则这个offset的坐标原点就在这个黄色盒子的左上角 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。 pageX、pagey: 事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。 pageX=clientX+横向滚动区域(如果有滚动条) pagey=clienty+纵向滚动区域(如果有滚动条) s...
一文吃透offsetX、offsetY、scrollTop、scrollY、scrollHeight、clientX、clientY、pageX、pageY以及类似属性的异同点
最新发布
weixin_63383437的博客
11-17 1651
offsetX
pageX，pageY，screenX，screenY，clientX，和clientY，offsetX ，offsetY，layerX，layerY的使用 和 区别
IT技术宅-北方的刀郎
01-25 2127
pageX，pageY，screenX，screenY，clientX，和clientY返回一个数，其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。 写了俩文件，放一个文件夹内测试看完就能明白， layerX_pageX_clientX_screenX_window_document_body.html： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
NULL 博文链接：https://meizhi.iteye.com/blog/576133
鼠标事件clientX、clientY
04-21
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
vue实现拖拽效果
11-27
首先要搞明白分清clientY pageY screenY layerY offsetY的区别 作用3（事件对象中记录的鼠标位置） 语法 解释 evt.screenX 相对于屏幕的左上角为原点 evt.screenY evt.clientX 相对于浏览器的客户端左上角为原点...
js Event对象的5种坐标
10-28
3. **offsetX 和 offsetY**： 这两个属性表示鼠标相对于事件源元素边框的距离，但它们在IE8及以下版本中并不支持。在Firefox中，可以通过计算`event.clientX - element.getBoundingClientRect().left`和`event....
dom
03-31
会通过滚动而改变mouseEvent：（鼠标事件）[ ] offsetX，offsetY：事件属性返回触发事件时，鼠标相对于事件源元素的X，Y坐标，标准事件没有对应的属性clientX，clientY：事件属性返回当事件被触发时鼠标指针相对于...
pageX/pageY的兼容性问题
weixin_42442123的博客
11-06 1358
e.clientX/e.clientY 鼠标在可视区域中的位置 e.pageX/e.pageY 鼠标在页面中的位置 有兼容性问题 从IE9以后才支持 pageY = clientY + 页面滚动出去的距离 // 获取页面滚动出去的距离 function getScroll() { var scrollLeft = document.body.s...
前端：pageY、clientY、offsetY的区别&拖动效果优化
博客
09-06 1万+
前言 之前我写过一篇html和JavaScript实现拖动效果的文章，这篇文章里面的东西实在是有些简单了，而且实际上会出现错误，错误效果如下： 同样的界面，我们滑动到最上面，效果却是正确的： 为什么呢，其实是因为位置的原因，当我们在最上面拖动时，拖动的空间距离顶部的距离是不变的，而当页面滑动到下方时，拖动的时候，页面的位置是不一样的，因此计算出来的也是错误的，引起错误的代码为这其中的...
彻底搞懂 offsetX、scrollX、clientX 的区别
lefex的博客
03-05 1万+
无论在 iOS 还是前端开发中，关于如何定位一个元素是必须要掌握的知识，而在前端中，元素定位比较难理解，我们今天一起学习下。在 DOM 设计中，主要通过这些 API 来确定某个元素的具体...
什么?你还不知道offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别，进来唠唠
weixin_44995391的博客
07-24 446
offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别
JavaScript中pageX pageY offsetX offsetY区别
onion_line的博客
03-14 5878
IE下没有pageX,pageY这两个属性  pageX pageY:鼠标指针的位置，文档的坐标。offsetX offsetY:鼠标相对于事件源元素的x,y坐标
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
热门推荐
lzding的博客
05-02 5万+
通过 2 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持：
原生js获取鼠标在盒子上的位置pageX、pageY、offsetTop、offsetLeft
u010234868的专栏
07-06 1336
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; /*添加高度使其出现滚动条*/ height: 1000px; } #box { width: 200px; height: 200px; bac.
JavaScript 获取鼠标pageX/pageY的兼容写法
houyanhua1的专栏
03-16 1642
demo.html： //点击页面的任何部分 document.onclick = function (event) { //兼容写法 event = event || window.event; //event的兼容写
clientX,clientY,pageX,pageY,screenX,screenY的区别
《春馨梦》的专栏
11-12 1842
1.客户区坐标的位置（clientX,clientY） 所有浏览器支持这两个属性,他们两的值表示事件发生时鼠标的指针在视口中的水平和垂直坐标 2.页面坐标位置（pageX,pageY） 这两个属性表示鼠标在页面中的位置，因此坐标是从页面本身而非视图的左边和顶端计算的，在页面没有滚动的情况下，pageX和pageY 的值与clientX和clientY的值相等 IE8及更早版本不支持事件对象
offsetx,clientx,pagex
03-17
offsetX，clientX 和 pageX 都是 JavaScript 中用于获取鼠标相对于文档的坐标的属性。 offsetX：是鼠标相对于当前元素的左边界的水平距离。 clientX：是鼠标相对于浏览器窗口的左边界的水平距离。 pageX：是鼠标...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值