pageX\/pageY、screenX\/screenY、clientX\/clientY的区别

最新推荐文章于 2022-10-21 10:37:16 发布
最新推荐文章于 2022-10-21 10:37:16 发布
阅读量555 收藏
点赞数
分类专栏： webapi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zh__quan/article/details/97679974
版权
本文详细解析了不同鼠标事件坐标系的概念及其应用场景，包括screenX/screenY、clientX/clientY、pageX/pageY、offsetX/offsetY的区别和联系，帮助读者深入理解网页布局和交互设计中的坐标定位。
摘要由CSDN通过智能技术生成

 

screenX\/screenY 是以屏幕为基准进行测量，即：当前元素距离电脑显示器屏幕的尺寸

clientX 和 clientY 是以当前可视区域为基准，类似于固定定位。相对于body

pageX 和 pageY 是以当前文档（绝对定位）为基准，不适用于IE6-8;  相对于浏览器

offsetX和offsetY 和pageX,pageY相同，只有IE事件有这2个属性，标准事件没有对应的属性。

 

 

 

 

 

 

zh__quan
关注
专栏目录
clientY vs pageY
liuhao9999的博客
07-27 228
从该点到视口和页面顶部的距离（以像素为单位）。是可能具有滚动条的整个渲染页面，而。给定页面中的一个点，
第八周自学前端H5中问题总结，如ClientX/client pageX/pageY screen/screenY的使用和区别
qq_41550093的博客
04-21 604
1.div/section/article的区别 <div> - 内容组<section> - 有联系的内容组<article> - 独立完整的内容 2.ClientX/client pageX/pageY screen/screenY的使用和区别 pageX/pageY：低版本浏览器（IE67）不支持，以当前文档（body）的左上角为基准点。 scre...
鼠标位置的获取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栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置， 并且如果在...
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
YY的博客
10-21 1220
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
screenX、clientX、pageX, offsetX的区别
小太阳的博客
06-16 775
一、图解 clientY、screenY、pageY、offsetY这四者是事件对象event上的属性 如图所示：假设紫色正方形中心处是点击处，紫色区域是鼠标事件触发对象 二、概念 1.screenX和screenY 参考点：电脑屏幕左上角 screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量 screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量 2.clientX和clientY 参考点：浏览器内容区域左上角 clientX：鼠标点击位置相对于浏览器可视区域的水平偏移量（不会计算水
js进阶 12-7 pageY和screenY以及clientY的区别是什么
weixin_34014555的博客
07-06 170
js进阶 12-7 pageY和screenY以及clientY的区别是什么 一、总结 一句话总结：pageY是距文件，screenY是获取显示器屏幕位置的坐标，clientY是页面视口。 没有滚动条时，(pageY=clientY)+浏览器菜单栏高度=screenY； 有滚动条时，pageY&gt;screenY&gt;clientY， 因为clientY是页面视图距离，有无滚动条时你...
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
pageX，clientX，screenX的区别
m0_38005587的博客
11-27 1860
clientX是指鼠标到当前页面X轴的距离，如果有滚动，这个参考点也会改变，还不能理解就想一下fixed定位就可以了； pageX是指鼠标到当前bodyX轴的距离，如果有滚动，参考点也不会变，如果position为absolute为例； screenX是鼠标到当前屏幕X轴的距离，不会改变，但不同的会有所不同；...
如何获取鼠标位置，以及pageX/Y、screenX/Y、clientX/Y和offsetX/Y 的区别
小小前端
04-17 444
如何获取鼠标位置 当我们注册事件时，系统会自动给我们创建一个 事件对象 以参数的形式传递到函数内 我们可以先打印一下 事件对象event ,看看里面到底有什么 document.onclick = function(event){ console.log(event) } 那该用哪个，它们又有什么区别呢？ 属性 描述 offsetX / offsetY 相对于父盒子的...
pageX screenX clientX区别
weixin_42187676的博客
09-29 140
pageX/pageY、clientX/clientY、screenX/screenY的区别
cai_niao5623的博客
10-15 2410
在触发鼠标事件的时候会传一个event参数，在这个参数中我们可以获得pageX/pageY、clientX/clientY、screenX/screenY，但是这几个属性有啥区别呢？看下图 screenX/screenY：其实就是你的鼠标指针距离你电脑屏幕左侧边缘和上侧边缘的距离 clientX/clientY：其实就是你的鼠标指针距离当前网页最左侧和最上侧的距离(不包含滚动条的距离) pageX/pageY：其实就是你的鼠标指针距离当前网页最最侧和最上侧的距离(包含滚动条的距离) ...
clientX,clientY,screenX,screenY,offsetX,offsetY 区别测试
qq_46100747的博客
01-13 820
clientX：当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置； clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置； screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置； screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置； offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置 offsetY：当鼠标事件发生时，鼠标相对于事件.
pageX，pageY，screenX，screenY，clientX，和clientY，offsetX ，offsetY，layerX，layerY的使用 和 区别
IT技术宅-北方的刀郎
01-25 2209
pageX，pageY，screenX，screenY，clientX，和clientY返回一个数，其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。 写了俩文件，放一个文件夹内测试看完就能明白， layerX_pageX_clientX_screenX_window_document_body.html： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
clientX/clientY 与 screenX/screenY 的区别
蚂蚁的洞
08-31 6088
clientX/clientY 、 screenX/screenY 、pageX/pageY 与offsetX/offsetY的区别
screenY,pageY,clientY
优雅的博客
09-07 784
举个例子来说明这个问题，你现在在一辆公交车上面，车只能直行，如果你的车上的位置一直不变，即使车辆在行驶，你相对于车前面的挡风玻璃的距离一直是没有变的（clientY），但是因为车在运动，所以你的相对于出发点的距离一直是在改变的（pageY）.      同理，screenX,pageX和clientX和上述的理解也是一致的。
鼠标事件之clientX(Y)、offsetX(Y)、screenX(Y)、pageX(Y)、x(y)的区别与使用详解
Janewenhui的博客
12-18 594
文章目录一、鼠标事件1. onclick2. onmousedown3. onmouseup4. onmousemove5. onmouseover6. onmouseout二、坐标1、clientX、clientY2、pageX、pageY3、screenX、screenY4、offsetX、offsetY5、x、y 一、鼠标事件 鼠标事件有下面这几种： 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmous
screenX pageX clientX 的区别
积淀，为自己的梦想坚持--王辉
12-26 1407
screenX clientX pageX概念 screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 如图(红点就是鼠标
screenY，clientY，pageY
weixin_30376323的博客
08-17 126
1.clientY：页面可视区左上角顶部为原点（不论页面滚轮下拉多少，点击最顶部依旧是0） 2.screenY：以你★电脑屏幕★的顶部左上角为原点（基本上可以用这个量你电脑屏幕的分辨率了。跟页面怎样无关） 3.pageY：以页面左上角为原点（滚动到页面底部一点击，你就能知道这个页面的高度，pageY=clientY+scrollTop） 转载于:https://www.cnblogs.com/...
pageY,clientY,screenY
qq_36800701的博客
06-12 408
pageY：相对于文档的左上角的坐标 (需要加上滚动距离，类似于在body的绝对定位)clientY：相对于浏览器窗口的左上角的坐标（类似于固定定位）screenY：相对于屏幕的左上角的坐标...
关于鼠标事件的screenY,pageY,clientY,layerY,offsetY属性 （详细图解）
weixin_34146410的博客
03-04 136
screenY 鼠标相对于显示器屏幕左上角的偏移 pageY 鼠标相对于页面左上角的偏移 (其值不会受滚动条的影响) IE9之下并不支持这个属性 但是可以写点代码计算出来。 jQuery中的实现： 1 // Calculate pageX/Y if missing and clientX/Y avai...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值