图解事件坐标screenX、clientX、pageX, offsetX的区别

最新推荐文章于 2023-02-27 22:43:58 发布
最新推荐文章于 2023-02-27 22:43:58 发布
阅读量814 收藏 1
点赞数
分类专栏： css 文章标签： css3 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/song854601134/article/details/125215127
版权

图解事件坐标screenX、clientX、pageX, offsetX的区别

一、图解

在这里插入图片描述

如图所示，假设页面中灰色圆点是鼠标点击处，黄色区域是鼠标触发事件对象

二、概念

1、screenX 和screenY

  • 参照点：电脑屏幕左上角
  • screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量
  • screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量

2、clientX和clientY

  • 参照点：浏览器内容区域左上角
  • clientX：鼠标点击位置相对于浏览器可视区域的水平偏移量（不会计算水平滚动的距离）
  • clientY：鼠标点击位置相对于浏览器可视区域的垂直偏移量（不会计算垂直滚动条的距离）

3、pageX和pageY

  • 参照点：网页的左上角
  • pageX：鼠标点击位置相对于网页左上角的水平偏移量，也就是clientX加上水平滚动条的距离
  • pageY：鼠标点击位置相对于网页左上角的垂直平偏移量，也就是clientY加上垂直滚动条的距离

4、offsetX和offsetY

  • offsetX：鼠标点击位置相对于触发事件对象的水平距离
  • offsetY：鼠标点击位置相对于触发事件对象的垂直距离

三、事件对象参数

在这里插入图片描述

song854601134
关注
专栏目录
clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 874
QQ群招募中：646258285（招募中，没几个人说话）， 需要交流的朋友可以直接加我微信( DntBeliv )或QQ( 1121864253 ) 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 五、x、y 和screenX、screenY
event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 896
现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。 用途：待发现 clientX|clientY和pageX|pageY clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于cs.
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
screenX与clientX区别
qq_36220534的博客
10-21 1619
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角pageX：参照点也是浏览器内容区域的左上角
clientX、screenX、offsetX区别
LLL_liuhui的博客
06-04 401
1、clientX/clientY clientX: 鼠标相对于浏览器文档显示区的水平X坐标,不包括工具栏和滚动条 clientY:鼠标相对于浏览器文档显示区的垂直Y坐标,不包括工具栏和滚动条 2、screenX/screenY screenX:鼠标相对于显示器屏幕的水平X坐标,不包括滚动条 screenY:鼠标相对于显示器屏幕的垂直Y坐标,不包括滚动条 3、offsetX/offse...
offsetX，clientX，pageX
DongFuPanda的博客
02-10 311
鼠标的位置 offsetX offsetY 相当于事件源元素的位置坐标。IE 只支持 offsetX 和 offsetY。网上有文章说 IE 和 chrome 有区别，但是我给父元素加了 border、padding 后发现数值一致，并无区别，所以应该可以放心使用。 clientX clientY 相对于浏览器视口的坐标。 pageX pageY 相对于 document 左上角的坐标。 ...
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
pagex，screenx，clientx的区别
kateLi的专栏
07-09 1358
screenX：参照物为电脑的屏幕左上角，距离电脑屏幕的水平距离 clientX：参照物是内容区域左上角，距离内容区域左上角的水平距离，会随着滚动条的移动而移动 pageX：参照物也是内容区域的左上角，距离内容区域左上角的水平距离，但是不会随着滚动条的移动而移动
screenX,clientX的区别
热情的血液、石头的冰冷
04-02 523
IE ，FF 通用属性： screenX，screenY 获取事件触发是,鼠标在屏幕中的位置相对于电脑屏幕的坐标，也就是相对于显示器的坐标；， clientX，clientY  获取事件触发时，鼠标在屏幕中的位置相对于浏览器显示区域的坐标，无论浏览器中的滚动条怎么拉，图片中蓝点的坐标都不会变，因为是鼠标在电脑屏幕中的位置相对于浏览器显示区域的坐标；看下图：
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2731
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
js clientX pageX offsetX screenX
哈哈绝的博客
10-28 1209
js clientX pageX offsetX screenX pageX pageY:鼠标指针的位置，相对于文档开头左上角的位置 offsetX offsetY:鼠标相对于事件源元素左上角的x,y坐标 clientX clientY：鼠标指针相对与窗口左上角的位置 screenX screenY 鼠标指针相对于显示器左上角的位置 ...
screenX clientX pageX的区别
weixin_33795743的博客
11-11 191
screenX clientX pageX概念打开的pop窗口随着鼠标点击的dom元素而定位展示的js代码：e是click事件，o是pop窗口的宽度或高度，eventX = function (e, o) {  e = e || window.event;  o = o || 0;  x = e.pageX || e.clientX + document.body.scroolLeft;  ret...
clientX, pageX,screenX, offsetX
lllsj的博客
10-28 106
开发的时候记不住啊,如图就很明显了.
offsetLeft理解以及MouseEvent接口中的screenX,clientX,pageX,offsetX区别.
qq_15686015的博客
01-08 1317
背景 最近在做一款基于canvas的画板插件，开发过程中的画笔功能就会使用很多关于鼠标位置的属性：screenX/Y，clientX/Y，pageX/Y，offsetX/Y。 之前在做到过类似的工具(很简单)，但都是看了下鼠标位置信息的api看到那个用那个没有去深思它们之间的区别，这次在遇见坑花了点时间整理强化下自己的记忆。 要理解它们之间的差异需要正确的认识参照物。 screenX/Y 正如名字一样它的参照物是电脑的屏幕。如图所示 ...
图解鼠标事件的 ScreenX ，LayerX，clientX，PageX，offsetX，X
fang_my的博客
02-27 1810
这篇文章是由我随手做的笔记改编而来，笔记内容比较粗糙，转化为文章后个人感觉又重新复习了一遍，加深了很大的印象。如果该文章能帮助到一些人，也是一件幸事。可能我以后也会经常来翻阅自己的这篇文章～这几个属性确实容易搞混🤔。
clientX、pageX、offsetX、screenX、offsetWidth、clientWidth等
平平无奇小码农的博客
01-27 1249
1、clientX 、clientY document.onclick = function (event){ var clientX = event.clientX; var clientY = event.clientY; } 这里的clientX和clientY是鼠标点击事件中点击的那个点在浏览器中的坐标
2022-03-27 screenX和clientX的区别以及offsetX和pageX的区别
GAARA
03-27 1315
1.screenX和clientX的区别 screenX是电脑显示器原点(显示器左上角)到鼠标点击位置的距离 clientX是可视化窗口原点(网页左上角)到鼠标点击位置的距离 2.offsetX和pageX的区别 offsetX是事件源原点(div左上角)到鼠标点击位置的距离 pageX是水平滚动条的距离(如果有的话)+clientX ...
clientX、pageX、screenX以及offsetX区别
weixin_42178670的博客
10-29 1612
clientX：鼠标相对于浏览器窗口可视区域x方向坐标clientY：鼠标相对于浏览器窗口可视区域y方向坐标。
pageX offsetX screenX
最新发布
07-27
这些是JavaScript中的一些属性，用于获取鼠标...- offsetX：鼠标事件相对于事件目标元素的水平坐标。 - screenX：鼠标事件相对于用户屏幕的水平坐标。 这些属性可以在处理鼠标事件时使用，以获取鼠标位置的相关信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值