clientX/Y、offsetX/Y、pageX/Y、screenX/Y和scrollTop/scrollLeft的区别

已于 2023-05-19 14:46:04 修改
阅读量135 收藏
点赞数 1
文章标签： javascript html css 前端 jquery
于 2023-05-18 17:59:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ludaiyijia/article/details/130749044
版权

clientX/Y、offsetX/Y、pageX/Y、screenX/Y和scrollTop/scrollLeft的区别

没有滚动条---------看这里

1. 没有滚动条

clientX/Y

  • 与document 的距离
    在这里插入图片描述

offsetX/Y

与 点击元素 比较
在这里插入图片描述

pageX/Y

  • pageX/Y 和 clientX/Y 是相同的。（在没有滚动条的情况下）

screenX/Y

与 浏览器视口比较
在这里插入图片描述

2. 存在滚动条

clientX/Y

仍然和 document 比较。 但是需要 减去 滚动条的距离。
在这里插入图片描述

offsetX/Y

和 没有滚动条的情况一致。

pageX/Y

与 clientX/Y 一致

screenX/Y

点击位置 与 你的电脑屏幕 进行比较。
在这里插入图片描述

总结：

  • clientX / clientY : 到 document顶部和左边的距离。(不包含浏览器的书签栏、导航栏、页签栏)
  • pageX / pageY ：同 clientX / clientY
  • offsetX / offsetY ：到被点击元素顶部和左边的距离。
  • screenX / screenY：点击位置 到 电脑屏幕 顶部 和 左边 的距离。
  • scrollLeft / scrollTop：滚动元素滚动的距离。
ludaiyijia
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
页面上clientTop,offsetTop,scrollTop的理解，js元素的event.x/.clientX等位置的理解
abc589721的博客
10-25 111
稍后完善 http://www.cnblogs.com/trlanfeng/archive/2012/11/04/2753280.html http://www.cnblogs.com/asqq/archive/2012/04/19/2456927.html http://www.open-open.com/lib/view/open1420120422531.html http...
offsetTop clientX pageX screenX scrollTop之间的区别以及代码实现
theowl的专栏
07-21 1408
边界尺寸 var a= e.pageX;//鼠标在页面中的坐标位置，可能大于整个屏幕 var ay= e.pageY;//鼠标在页面中的坐标位置，可能大于整个屏幕 //console.log(ay);   var b= e.clientX;//鼠标在屏幕上的x坐标 var by= e.clientY;//鼠标在屏幕上的y坐标,所以ay>=by //console.log(by);
彻底搞懂 offsetX、scrollX、clientX 的区别
热门推荐
lefex的博客
03-05 1万+
无论在 iOS 还是前端开发中，关于如何定位一个元素是必须要掌握的知识，而在前端中，元素定位比较难理解，我们今天一起学习下。在 DOM 设计中，主要通过这些 API 来确定某个元素的具体...
event 事件 clientX 和clientY 配合scrollTop使用, div跟着鼠标走
weixin_33840661的博客
03-12 162
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 200px; ...
pagyX/Y、clientX/Y、offsetX/Y、screenX/Y；clientHeight、scrollHeight、scrollTop；offsetHeight、offsetTop+滑动条
m0_56029970的博客
09-01 74
JavaScript尺寸和位置的理解，外加简易滑动条实例
clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y clientHeight innerWidth...
weixin_30707875的博客
04-18 70
关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX:跟sc...
JS：clientX/Y、screenX/Y、pageX/Y、offsetX/Y、layerX/Y、x/y
鬼眼邪神
05-10 1445
Event对象 Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 Event对象只在事件发生的过程中才有效。 浏览器兼容性 FF：没有window.event对象。可以通过给函数的参数传递event对象。
鼠标行为、坐标系、pageX/Y、拖拽
weixin_43641912的博客
04-26 277
鼠标行为 document.onclick = function(e){ var e = e || window.event; console.log(e.clientX,e.clientY); } clientX clientY 鼠标位置相对于当前页面可视区域的坐标（不包括滚动条的距离） X/Y 同clientX/Y 老版本firefox不支持 pageX/Y 鼠标位置相对于当前文档的坐标（包含滚动条的距离）IE9以下不支持 layerX/Y 同pageX/Y，IE11以下同 client
javascript中screenXY、clientXY、pageXY和offsetXY的区别
第三眼的思绪
12-23 2604
screenXY：screenX和screenY的参照点是用户屏幕左上角，screenX是鼠标位置相对于用户屏幕（左侧）水平偏移量，而screenY则是鼠标相对于屏幕（顶部）垂直方向的偏移量。 clientXY：screenX和screenY的参照点是浏览器内容区域的左上角，clientX是相对于用户浏览器（左侧）的水平偏移量，而clientY则是相对于浏览器内容区（顶部）垂直放心的偏移量。
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
IE/FireFox具备兼容性的拖动代码
10-30
3. **计算元素坐标**：通过`evt.clientX`和`evt.clientY`获取鼠标在页面上的坐标，然后减去元素相对于父元素的偏移量，得到元素在屏幕上的起始位置。这样可以确保元素跟随鼠标的移动而移动。 4. **创建临时元素**：...
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
.NET/C# 面试试题
07-21
- 获取鼠标位置，IE使用`event.clientX`和`event.clientY`，FF需要事件对象传递以获取`pageX`和`pageY`。 - 边界问题，IE和FF对边框宽度的计算方式不同，影响元素的实际尺寸。 这些面试题反映了.NET/C#开发者需要...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 779
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 430
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 348
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
react 快速入门思维导图
最新发布
weixin_44565776的博客
07-18 156
只要掌握了这些react技能，基本就可以熟练使用react了
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 974
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
offsetx,clientx,pagex
03-17
offsetX，clientX 和 pageX 都是 JavaScript 中用于获取鼠标相对于文档的坐标的属性。 offsetX：是鼠标相对于当前元素的左边界的水平距离。 clientX：是鼠标相对于浏览器窗口的左边界的水平距离。 pageX：是鼠标相对于文档左边界的水平距离。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值