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

最新推荐文章于 2023-11-17 01:55:00 发布
最新推荐文章于 2023-11-17 01:55:00 发布
阅读量2.3k 收藏 13
点赞数 1
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cai_niao5623/article/details/120791512
版权

在触发鼠标事件的时候会传一个event参数，在这个参数中我们可以获得pageX/pageY、clientX/clientY、screenX/screenY，但是这几个属性有啥区别呢？看下图

 screenX/screenY：其实就是你的鼠标指针距离你电脑屏幕左侧边缘和上侧边缘的距离

clientX/clientY：其实就是你的鼠标指针距离当前网页最左侧和最上侧的距离(不包含滚动条的距离)

pageX/pageY：其实就是你的鼠标指针距离当前网页最最侧和最上侧的距离(包含滚动条的距离)

韭伍後
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
鼠标事件clientX、clientY
04-21
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
js进阶 12-7 pageY和screenY以及clientY的区别是什么
weixin_34014555的博客
07-06 151
js进阶 12-7 pageY和screenY以及clientY的区别是什么 一、总结 一句话总结：pageY是距文件，screenY是获取显示器屏幕位置的坐标，clientY是页面视口。 没有滚动条时，(pageY=clientY)+浏览器菜单栏高度=screenY； 有滚动条时，pageY>screenY>clientY， 因为clientY是页面视图距离，有无滚动条时你...
前端：pageY、clientY、offsetY的区别&拖动效果优化
博客
09-06 1万+
前言 之前我写过一篇html和JavaScript实现拖动效果的文章，这篇文章里面的东西实在是有些简单了，而且实际上会出现错误，错误效果如下： 同样的界面，我们滑动到最上面，效果却是正确的： 为什么呢，其实是因为位置的原因，当我们在最上面拖动时，拖动的空间距离顶部的距离是不变的，而当页面滑动到下方时，拖动的时候，页面的位置是不一样的，因此计算出来的也是错误的，引起错误的代码为这其中的...
让一个定位的盒子水平垂直居中
Jack_13201的博客
08-28 887
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JS中 PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
qq_43631129的博客
07-05 6690
PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
PageX、clientX、screenX、offsetX、layerX的区别
qq_45044074的博客
03-08 7695
一.PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移而变化. 二.screenX screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议 三.offsetX和layerX offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有bode
正确使用pageX、pageY、offsetLeft、offsetTop
zheng_pika的博客
07-05 9352
获取鼠标位置的时候，遇到一点疑问，然后验证了一下自己的疑惑；pageX、pageY跟clientX和clientY类似，是相对于浏览器文档的坐标；offsetLeft、offsetTop获取的是固定定位，也就是说，监听某个选择器内的鼠标位置，这个方法返回的是这个固定范围的左上角离页面左上角的距离坐标；下面利用一个简单的div来演示一下div{ width: 100px; ...
touch:轻量级移动端触摸手势库
06-15
回调函数的参数回调函数里面的参数event包含4个属性:pagex,pageY,clientX,clientY,screenX,screenY,direction,displacementX,displacementY.screenX事件发生时手指触摸位置距离屏幕左上角的X方向(水平)距离.screenY...
移动端web总结笔记1
08-08
* pageX/pageY/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置。 在使用触摸事件时，我们需要注意阻止浏览器的默认事件，例如使用 e.preventDefault()。 三、页面跳转 页面跳转是移动端 Web...
JS中各种尺寸的获取
01-08
关于clientX/clientY与pageX/pageY的关系，当没有滚动条时，pageX等于clientX，pageY等于clientY，因为没有额外的滚动偏移。但当页面有滚动条时，pageX和pageY会加上滚动条滚动的距离（ScrollLeft和ScrollTop）。 ...
鼠标位置的获取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栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置， 并且如果在...
pageX、clientX等的区别
热门推荐
我的blog屋
05-26 1万+
鼠标事件 鼠标事件有下面这几种： 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ cons...
clientX、pageX、offsetX、screenX、offsetWidth、clientWidth等
平平无奇小码农的博客
01-27 1114
1、clientX 、clientY document.onclick = function (event){ var clientX = event.clientX; var clientY = event.clientY; } 这里的clientX和clientY是鼠标点击事件中点击的那个点在浏览器中的坐标
JavaScript中pageX pageY offsetX offsetY区别
onion_line的博客
03-14 5882
IE下没有pageX,pageY这两个属性  pageX pageY:鼠标指针的位置，文档的坐标。offsetX offsetY:鼠标相对于事件源元素的x,y坐标
一文吃透offsetX、offsetY、scrollTop、scrollY、scrollHeight、clientX、clientY、pageX、pageY以及类似属性的异同点
最新发布
weixin_63383437的博客
11-17 1962
offsetX
JS之pageY,clientY,screenY,offsetY,clientTop,offsetTop区别测试
qq_45172317的博客
06-08 557
pageY:鼠标在整个html页面y轴的位置 clientY:鼠标在整个视口的位置 screenY:鼠标到浏览器最上端的距离 offsetY:鼠标相对于触发事件的元素的位置 clientTop:元素顶部边框的宽度 offsetTop:元素到到浏览器最上端的距离......
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
YY的博客
10-21 1136
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
图解offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别
逆风优雅的博客
06-10 5166
offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说，我给黄色的盒子定义一个点击事件，则这个offset的坐标原点就在这个黄色盒子的左上角 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。 pageX、pagey: 事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。 pageX=clientX+横向滚动区域(如果有滚动条) pagey=clienty+纵向滚动区域(如果有滚动条) s...
微信开发者工具 touches属性的pageX: 86, pageY: 177.75, clientX: 86, clientY: 177.75分别是什么意思？
06-13
- `pageX` 和 `pageY`：触摸点相对于文档页面左上角的坐标。 - `clientX` 和 `clientY`：触摸点相对于浏览器窗口左上角的坐标。 一般来说，`pageX/Y` 和 `clientX/Y` 的值是相同的，除非页面发生了滚动，此时 `...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值