offsetx,pagex区别

最新推荐文章于 2024-08-06 03:15:12 发布
最新推荐文章于 2024-08-06 03:15:12 发布
阅读量1k 收藏
点赞数
分类专栏： 前端学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tjzc1352640/article/details/79039567
版权
clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 1039
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
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
javascript的一些坐标位置属性2
yangsp1的专栏
08-05 329
screenX:鼠标在显示屏幕上的坐标。 clientX:鼠标在页面显示区域的坐标。 注：以上两个都是各浏览器通用的。 pageX:FF特有，鼠标在页面上的位置，从页面左上角开始定位，这个可以很方便在整个页面上进行定位，IE没有直接替换的属性。 layerX:FF特有，鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了position的父元素”的边界的位置，从bo...
offsetX和pageX的区别
嗯哼，小可爱的博客
03-15 1217
pageX 相对于document整个页面
pageX,clientX,screenX,offsetX区别
热门推荐
05-09 2万+
pageX/pageY: 鼠标相对于整个页面的X/Y坐标。 注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。 特别说明：IE不支持！ clientX/clientY： 事件发生时鼠标在浏览器内容区域的X/Y坐标（不包含滚动条）。 浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也
比较offsetX, pageX,clientX,screenX的区别
hhh_hh_h的博客
04-07 774
之前一直没有把offset，page，client和screen这几个属性弄得很清楚，今天花了点时间算是大体上了解了这几个属性的区别，所以把我了解到的写出来，也算是做个总结。 首先我们来看看这几个属性的解释： 1.offsetX：鼠标相对于事件源元素的X坐标，只有IE事件有这2个属性，标准事件没有对应的属性 2.pageX： 鼠标指针的位置，相对于文档的左边缘 3.clientX：返回当事
写轮播图时，关于offsetX和pageX的选择以及一些坑
weixin_57675185的博客
08-29 851
一、不要使用offsetX 前几天在公司实习，由于使用了swiper来做c端的滑动效果，在自定义的过程中，出现了一系列的坑，我看了源码，看了文档，也还是没有很好的理解，这个swiper的标准操作流程，当时，就想到能不能自己写一个轮播图上去，于是也就又了下文。 大家都知道，其实轮播图的本质还是很简单的，就是在点击的时候，获得两个值，一个是当前包裹层的left值，一个是鼠标点击包裹层外面的展示层（也就是overflow：hidden的最外层）时的鼠标位置。这个包裹层的left...
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
pageX offsetX screenX
07-27
- pageX：鼠标事件相对于整个文档页面的水平坐标。 - offsetX：鼠标事件相对于事件目标元素的水平坐标。 - screenX：鼠标事件相对于用户屏幕的水平坐标。 这些属性可以在处理鼠标事件时使用，以获取鼠标位置的相关...
offsetX, pageX, clientX, offsetHeight, offsetParent, 和 offsetLeft
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-06 1074
在Web前端开发中，理解DOM元素的位置和尺寸是非常重要的。特别是当我们需要处理用户的交互行为，如鼠标点击事件时，了解鼠标的坐标以及元素的位置和大小对于构建响应式的UI至关重要。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在处理复杂的用户交互时，这些技巧和技术可以极大地提高用户体验和应用程序的整体性能。例如，当需要实现复杂的拖拽功能时，一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，专栏系列（点击解锁）
offsetX，clientX，pageX
DongFuPanda的博客
02-10 338
鼠标的位置 offsetX offsetY 相当于事件源元素的位置坐标。IE 只支持 offsetX 和 offsetY。网上有文章说 IE 和 chrome 有区别，但是我给父元素加了 border、padding 后发现数值一致，并无区别，所以应该可以放心使用。 clientX clientY 相对于浏览器视口的坐标。 pageX pageY 相对于 document 左上角的坐标。 ...
clientX,screenX,pageX,offsetX的区别
想搞全栈的前端
06-17 5199
前言 关于clientX,screenX,pageX,offsetX的区别之前也比较迷糊，然后自己写了几个demo算是弄明白了，在这记录一下。 定义 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标。 可以理解为距离浏览器窗口的距离，但注意这里不包括浏览器的导航栏距离只是浏览器内容区域。 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度...
offsetX offsetY 与 pageX pageY
weixin_30249203的博客
05-26 159
转载于:https://www.cnblogs.com/jcbo/p/6908525.html
offsetX、clientX、pageX等位置的计算
风火一回，一生不毁
06-01 5094
1.常见的事件位置属性 e.pageX——相对整个页面的坐标 注意:IE6、IE7、IE8无该属性 e.layerX——相对当前坐标系的border左上角开始的坐标 注意：在opera、IE6、IE7、IE8中这个属性，而IE8以上表示相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离 e.offsetX——相对当前坐标系的
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2853
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
pageX,clientX,offsetX,screenX,style.left,offsetLeft,scrollLeft,clientLeft的区别以及使用详解
qq_35859392的博客
01-25 1134
1.clientX，pageX，offsetX与screenX 先统一了解下这四个概念，理解不透没关系，这些属性都是用于鼠标的。 clientX：在水平方向上，鼠标指针距离浏览器左侧边缘的距离。 pageX：在水平方向上，鼠标指针距离网页文档X轴左侧边缘的距离。 offsetX：在水平方向上，鼠标指针距离鼠标所在元素左侧边缘的距离。 screenX：在水平方向上，鼠标指针距离电脑屏幕...
screenX、clientX、pageX, offsetX的区别
小太阳的博客
06-16 852
一、图解 clientY、screenY、pageY、offsetY这四者是事件对象event上的属性 如图所示：假设紫色正方形中心处是点击处，紫色区域是鼠标事件触发对象 二、概念 1.screenX和screenY 参考点：电脑屏幕左上角 screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量 screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量 2.clientX和clientY 参考点：浏览器内容区域左上角 clientX：鼠标点击位置相对于浏览器可视区域的水平偏移量（不会计算水
JS中 PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
qq_43631129的博客
07-05 8248
PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
关于screenX、clientX、pageX, offsetX的相关介绍
老衲的少女心i~
04-07 580
概念 1. offsetX 和offsetY offsetX ：鼠标点击位置相对于触发事件对象的水平距离 offsetY：鼠标点击位置相对于触发事件对象的垂直距离 2. clientX 和clientY clientX：返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的水平坐标。 客户区指的是当前窗口。（不会计算水平滚动的距离） clientY：返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 客户区指的是当前窗口。（不会计算垂直滚动的距离） 3. pageX 和pageY
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值