screenX clientX pageX概念

最新推荐文章于 2024-05-20 15:17:08 发布
最新推荐文章于 2024-05-20 15:17:08 发布
阅读量727 收藏
点赞数
分类专栏： javascript 文章标签： javascript clientX screenX pageX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjping11360/article/details/26220889
版权

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动

如图(红点就是鼠标当前位置)

紫幽人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
screenX、client X、pageX、offsetX、layerX
weixin_40509884的博客
03-24 1205
screenX, client X screenX: 鼠标在屏幕中的水平坐标 client X: 鼠标在客户端区域（浏览器可视区域）的水平坐标，不论页面是否有水平滚动 pageX 相对于整个文档的x（水平）坐标 个人认为：pageX = clientX + scrollLeft (水平滚动的距离) 以下是mdn的介绍： offsetX 相对于目标元素，鼠标点击的水平位置 layerX 是firefox用来替代offsetX/Y ...
JS client(X,Y)、screen(X,Y)、page（X,Y）的区别
weixin_30359021的博客
12-29 253
clientX：光标相对于当前窗口的水平位置； clientY :光标相对于当前窗口的垂直位置； screenX :光标相对于该屏幕的水平位置； screenY：光标相对于该屏幕的垂直位置； pageX :光标相对于当前文档的水平位置； pageY ：光标相对于当前文档的垂直位置； 转载于:https://www.cnblogs.com/zhang-wang/p/6233083.html...
2022-03-27 screenX和clientX的区别以及offsetX和pageX的区别
GAARA
03-27 1296
1.screenX和clientX的区别 screenX是电脑显示器原点(显示器左上角)到鼠标点击位置的距离 clientX是可视化窗口原点(网页左上角)到鼠标点击位置的距离 2.offsetX和pageX的区别 offsetX是事件源原点(div左上角)到鼠标点击位置的距离 pageX是水平滚动条的距离(如果有的话)+clientX ...
clintx offsetx screenx 的剖析
qq_27970999的博客
04-10 355
event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性event.pageX、event.pageY类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。event.o...
js里面关于位置坐标的总结
adobe1992
07-25 964
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offs
[转]分析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
原生JS实现拖拽图片效果
11-22
javascript event 对象的clientX,offsetX,screenX,pageX的区别： 用html5的drag来实现拖拽有兼容性问题，使用拖拽插件代码又很多，而这个拖拽demo代码少，并且兼容所有浏览器，很值得在项目中使用， css样式如下： ...
js-事件1_获取鼠标坐标clientX+scrollLeft及兼容性写法_跟随鼠标移动的divs
weixin_30885111的博客
07-27 213
一、获取鼠标坐标 　　clientX：鼠标到可视区边缘的距离； scrollLeft:滚动条到页面顶端的距离（不可视区的距离） 　　兼容性写法： 　　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var scrollLeft = document.documentE...
元素偏移量offset系列及e.pageX(e.pageY)
katherin_wanzi的博客
07-14 1321
1.offset概述 注意：目标元素的父元素要有定位，否则偏移量为目标元素与元素之间的距离 2.offset与style的区别 3.e.pageX和e.pageY 目标元素在浏览器中的位置 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
js怎么控制textarea滚动条定位在光标的位置
王旭东
05-27 1323
  如题：先blur，后focus。                                                        
原生js获取鼠标在盒子上的位置pageX、pageY、offsetTop、offsetLeft
u010234868的专栏
07-06 1294
<!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.
理解screenX clientX pageX概念
weixin_30832143的博客
01-04 111
先了解screenX,clientX,pageX概念 screenX: 鼠标位置相对于用户屏幕水平偏移量，而screenY就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX: 跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点不会随之滚动条的移动而移动。 pageX： 参照点也是浏览器内容区域的左上角，但它会随着滚动条而变动 下面看看具体的各个对象中的...
pageX、pageY及父元素的页面坐标使提示框跟随鼠标移动
lzf的博客
08-08 1386
提示框相对父元素的定位，要计算提示框的left和top属性。所以公式应该为提示框的相对坐标=鼠标的页面坐标-父元素的页面坐标 计算鼠标的页面坐标： event.pageX event.pageY 计算父元素的页面坐标： 首先写一个js获取元素到页面顶部距离的方法
用html制作一个影厅位置图,screenx影厅是什么
weixin_36099549的博客
06-18 1917
在线CSS布局HTML小编今天和大家分享，什么是ScreenX电影？有看过的吗？ScreenX是一种影厅专用的多面投影系统，通过270度多面投影将荧幕扩展至两侧墙面，将电影中的画面投放到影厅的三面空间，实现多屏放映。 全球共有84家院线布局ScreenX影厅，在中国大陆有多个城市开设ScreenX影厅。去ScreenX影厅看电影，只有靠后的位置了，影响观影不影响观影效果。从理论上来说，最中间的位置...
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 192
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
React Suspense与Concurrent Mode：异步渲染的未来
最新发布
天涯学馆
05-20 639
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 229
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
pageX offsetX screenX
07-27
- pageX：鼠标事件相对于整个文档页面的水平坐标。 - offsetX：鼠标事件相对于事件目标元素的水平坐标。 - screenX：鼠标事件相对于用户屏幕的水平坐标。 这些属性可以在处理鼠标事件时使用，以获取鼠标位置的相关...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值