clientY 与 pageY 的区别

最新推荐文章于 2023-03-22 22:27:17 发布
最新推荐文章于 2023-03-22 22:27:17 发布
阅读量500 收藏 1
点赞数 1
文章标签： 前端 javascript html 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46267040/article/details/125369685
版权

给定页面中的一个点，clientY 和 pageY 是从该点到视口和页面顶部的距离(以像素为单位)。

在这里，page 是整个渲染的页面，其中可能有滚动条，而 viewport 是页面的可见部分。

┌─────────────────────────────┬─┐◀︎─── Web page      ▲
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                 pageY
|                             | |                   |
├=============================┼─┤       ▲           |           ▲
|                             | |       |           |           |
|                             | |       |           |           |
|       Scroll bar ──────────▶︎| |       |           |        clientY
|                             | |     Browser       |           |
|                             | |     window        |           |
|       ● Point               | |       |           ▼           ▼
|                             | |       |
|                             | |       |
├=============================┼─┤       ▼
|                             | |
|                             | |
|                             | |
└─────────────────────────────┴─┘
lio_zero
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
09-03
本文将详细讲解五个与鼠标事件相关的属性：screenY、pageY、clientY、layerY和offsetY，它们都是用来描述鼠标位置的重要参数。 首先，`screenY`属性表示鼠标相对于显示器屏幕左上角的垂直偏移量。这意味着，当你...
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
clientY、screenY、pageY、offsetY和offsetTop分别指的是什么
卡卡的笔录
05-11 3717
clientY、screenY、pageY、offsetY这四者是事件对象event上的属性，offsetTop是目标元素的属性。、 clientY: 事件距离浏览器可视视口顶部的距离（工具栏往下，不包含滚动条的距离）； screenY: 事件距离电脑窗口顶部的距离； pageY: 事件距离页面顶部的距离（包含滚动条的距离）； offsetY: 事件距离目标元素内填充边（padding edge）在Y轴方向上的偏移量； offsetTop: 目标元素的Y方向上滚动条的距离。 ...
clientY pageY screenY layerY offsetY的区别
编写博客，学习交流
03-28 1145
clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近具有定位的左上角距离 offsetY 指的是距离它自己左上角的距离 相同点 不同点 clientY 距离页面左上角距离 受页面滚动的影响 pageY 距离页面左上角的距离 不受页面滚动影响 相同点 不同点 layerY 距离元
pageX/pageY、clientX/clientY、screenX/screenY的区别
cai_niao5623的博客
10-15 2305
在触发鼠标事件的时候会传一个event参数，在这个参数中我们可以获得pageX/pageY、clientX/clientY、screenX/screenY，但是这几个属性有啥区别呢？看下图 screenX/screenY：其实就是你的鼠标指针距离你电脑屏幕左侧边缘和上侧边缘的距离 clientX/clientY：其实就是你的鼠标指针距离当前网页最左侧和最上侧的距离(不包含滚动条的距离) pageX/pageY：其实就是你的鼠标指针距离当前网页最最侧和最上侧的距离(包含滚动条的距离) ...
Web元素定位与尺寸：理解page、client、screen和offset的区别
Blog of Leviash
03-22 632
当处理网页中的元素位置和尺寸时，常常会遇到一些属性和概念，例如 pageX、clientY、screenWidth、offsetLeft 等。这些属性用于描述元素在不同坐标系统中的位置和尺寸，理解它们的区别很重要。在这篇博客中，我们将深入探讨 page、client、screen 和 offset 的含义以及它们之间的区别。
js计算滚轮滚动到导航组件时吸顶
qq_41411324的博客
02-03 320
页面： 吸顶方法：
鼠标事件clientX、clientY
04-21
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
一个跟随鼠标的图片放大效果，与FF兼容
10-30
2. 使用`event`对象的跨浏览器方法，如`event.clientX`和`event.clientY`，而不是`event.pageX`和`event.pageY`。 3. 避免使用非标准的CSS属性，确保所有属性在Firefox中都能正确解析。 这个效果的实现涉及到HTML...
clientX、pageX、offsetX、screenX、offsetWidth、clientWidth等
平平无奇小码农的博客
01-27 1111
1、clientX 、clientY document.onclick = function (event){ var clientX = event.clientX; var clientY = event.clientY; } 这里的clientX和clientY是鼠标点击事件中点击的那个点在浏览器中的坐标
pageX、clientX等的区别
热门推荐
我的blog屋
05-26 1万+
鼠标事件 鼠标事件有下面这几种： 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ cons...
图解offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别
逆风优雅的博客
06-10 5162
offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说，我给黄色的盒子定义一个点击事件，则这个offset的坐标原点就在这个黄色盒子的左上角 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。 pageX、pagey: 事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。 pageX=clientX+横向滚动区域(如果有滚动条) pagey=clienty+纵向滚动区域(如果有滚动条) s...
鼠标位置的获取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栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置， 并且如果在...
pageY,clientY,screenY
qq_36800701的博客
06-12 383
pageY：相对于文档的左上角的坐标 (需要加上滚动距离，类似于在body的绝对定位)clientY：相对于浏览器窗口的左上角的坐标（类似于固定定位）screenY：相对于屏幕的左上角的坐标...
jquery中clientY，pageY和screenY的区别 最后三张图一目了然。转载的
肖肖肖丽珠的博客
05-13 5400
jquery获取坐标     * {margin: 0;padding: 0;}     div p {         display: inline-block;box-sizing: border-box;     } 鼠标当前的屏幕坐标是：x:0,y:0 鼠标当前窗口客户区的坐标是：x2:0,y2:0 鼠标在窗口页面中的坐标是：x3:0,y3:
jquery中clientY，pageY和screenY的区别
啊哈前端的专栏
11-06 1071
jquery获取坐标 * {margin: 0;padding: 0;} div p { display: inline-block;box-sizing: border-box; } 鼠标当前的屏幕坐标是：x:0,y:0 鼠标当前窗口客户区的坐标是：x2:0,y2:0 鼠标在窗口页面中的坐标是：x3:0,y3:0 $(document).ready(func
pageX\/pageY、screenX\/screenY、clientX\/clientY的区别
zh__quan的博客
07-30 510
screenX\/screenY 是以屏幕为基准进行测量，即：当前元素距离电脑显示器屏幕的尺寸 clientX 和 clientY 是以当前可视区域为基准，类似于固定定位。相对于body pageX 和 pageY 是以当前文档（绝对定位）为基准，不适用于IE6-8; 相对于浏览器 offsetX和offsetY 和pageX,pageY相同，只有IE事件有这2个属性，标准事件没有对...
Page和client的区别
weixin_30955341的博客
06-10 1285
PageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.真拗口,直接上图, 两个DIV接触点(黑点位置)如果将浏览器Y轴方向缩小,出现了滑动条就可以分辨出两者的区别 ...
clientX,clientY,pageX,pageY,screenX,screenY的区别
《春馨梦》的专栏
11-12 1846
1.客户区坐标的位置（clientX,clientY） 所有浏览器支持这两个属性,他们两的值表示事件发生时鼠标的指针在视口中的水平和垂直坐标 2.页面坐标位置（pageX,pageY） 这两个属性表示鼠标在页面中的位置，因此坐标是从页面本身而非视图的左边和顶端计算的，在页面没有滚动的情况下，pageX和pageY 的值与clientX和clientY的值相等 IE8及更早版本不支持事件对象
微信开发者工具 touches属性的pageX: 86, pageY: 177.75, clientX: 86, clientY: 177.75分别是什么意思？
最新发布
06-13
这些属性是指触摸点的坐标信息，具体解释如下： - `pageX` 和 `pageY`：触摸点相对于文档页面左上角的坐标。 - `clientX` 和 `clientY`：触摸点相对于浏览器窗口左上角的坐标。 一般来说，`pageX/Y` 和 `clientX/Y` 的值是相同的，除非页面发生了滚动，此时 `pageX/Y` 的值会随着滚动而改变。这些属性在处理触摸事件时非常有用，可以让开发者获取触摸点的精确位置，以便进行相关的操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值