图解鼠标事件的 ScreenX ,LayerX,clientX,PageX,offsetX,X

news2024/11/16 20:58:30

前言: 完在上一篇文章
🎁如何实现原生 JS 的拖拽效果我中使用到了 MouseEvent 事件对象身上的 clienX 的属性,但同时我也注意到了事件对象身上关于 X 的相关属性还有很多,并且在移动端开发中,这些属性需要频繁的用到,所以来总结一下这些关于 X 轴身上各个属性含义的不同。


一. 前期准备

  1. 在进行下面的内容之前,我希望大家先把传统数学中坐标轴的 y 轴方向和 x 轴的正轴负轴方向的概念遗忘掉。
    image.png

  2. 对于客户端来讲,它们采用坐标系的方向有些许不同,如下图。
    image.png
    造成这个的原因其实也很简单,你想一下,对于用户来讲,有用的区域就是我们的整块屏幕,如果负轴的话就已经超出屏幕之外了(下图的黄色区域),对我们没有任何实际的意义。所以一般来讲关于屏幕坐标时,我们就默认规定从左角开始向下为 y 坐标轴。
    image.png

  3. 对上面的解释其实不太严谨,但是可以让你有个大概的认知,从而方便我们再讲解下面几个属性不同时,让你有更深刻的理解。

  4. 让我们制造一个点击事件来引入我们今天的各个属性值。
    image.png
    image.png

  5. 可以看到右侧出现了很多关于 X,Y 的属性,接下来我们一个一个去了解它们各自到底代表着什么。

二. ScreenX 、ScreeY

  1. 其实从 Screen 这个单词的意思就能大概猜出来它代表的是什么意思。“屏幕” 嘛!那肯定是相对于屏幕来讲的啊。
    image.png

  2. 最开始我在这里迷惑的是下面这种情况,当我把浏览器窗口缩小的时候,这个 screenY 是代表着那根线的距离呢?🤔
    image.png

  3. 我们验证一下这个猜想,可以看出虽然我们浏览器窗口缩小了,但是我们的 screenY 依旧代表着我们点击的点到整块电脑屏幕显示器的最顶部的距离。
    22.gif

三. LayerX、LayerY

  1. 这个属性需要搭配使用 position 定位的几个值才能看出不一样的地方。大致概念为:如果元素自身的 position 属性不是 static,那么这个元素的 layer 就相对于它自身的左上角开始计算。
    image.png

  2. 如下图所示,当我点击了该元素内部以后,它的 layerXlayerY 大小计算就是从左上角开始的。
    image.png

  3. 同理,如果自身没有设置定位的相关属性,也就是元素本身 position 属性为 static。那么它会向上寻找离得最近的 position 不为 static 的元素,然后从相对于那个元素的左上角的距离开始计算。如果都没有,那么最终寻找到 body 标签结束。

三. clientX、clientY

  1. 仅从 client 这个单词来讲,如果你看过我之前的文章,那么我想你大概可以猜出来 clienXclientY 代表着什么,它们之间其实有异曲同工之处,不然为啥都叫 client 呢?
    在这个场景,client 这个单词其实代表着 用户端(代表浏览器窗口)可视区域的意思。

  2. 如果你还不了解什么是客户端可视区域,那么我强烈建议你点开下面的文章去了解一下,尤其你以后考虑接触移动端开发的话,那么下面三个属性是你必须知道的知识点。
    🫱你必须知道的clientWidth, offsetWidth, scrollWidth.

  3. 回到 clientXclientY 上,在这里明确比告诉大家一个概念:这两个值只关心用户当前屏幕(浏览器窗口)上能够看到的区域,并且从当前区域的左上角开始计算距离。
    image.png

  4. 什么意思?我们都知道当内容宽度或者高度超出父容器设置的宽度高度的时候,会引发溢出。常见处理溢出的方案就是设置它的 overflow 属性,如 overflow-auto 等。

  5. 我们先创建一个溢出的场景,并且我把 clientX 的数值展示到了页面上。
    33.gif

  6. 可以看出其实我在滑动的时候已经多次点击触发 onMouseDown 事件了,只不过对于我们来讲,我们能看到的区域仅仅只是容器最左边开始。(溢出的部分我们是看不到的,我们 client 也不关心那溢出的那部分的距离。)
    image.png

  7. 同理 clientY 也是不关心溢出的部分,只关心能看到的那部分。

四. PageX、 PageY

  1. 从上面刚刚讲过的 clientYclientX 不关心溢出的那部分。哪有人关心溢出的那部分距离吗?你别说还真有,那就是 pageXpageY

  2. 因为这个属性是相对于整个文档的左上角来开始计算的,所以我们上面的溢出例子还触发不了这个属性的变化。 我们这里借助 MDN 的页面来讲解,由上面 clientY 的知识可以得到,当我们页面没滚动的时候,这个距离其实就是 clientY 的距离。
    image.png

  3. 你可能会疑惑,奇怪,我们不是在讲解 PageY 吗?怎么又回到 clientY 了?其实一点也不奇怪,在这种情况下,我们的 pageYclientY 是一模一样的,没有任何区别。

  4. 但是!一旦发生了下面的情况,由于内容溢出导致页面发生了滚动。如下图:
    image.png
    那么我们的 PageY 属性记录的值就变成了滚动的距离+ clientY的距离。如果你知道 scroTop 所代表的含义,那么你可以很快得出下面的计算方式。
    pageY = scroTop + clientY
    如果你还不了解 scroTop 的相关知识,没关系,我同样讲过,你可以点击这里去自行了解。
    🫱关于使用 scrollTop 来完成 tab 栏的交互

  5. pageX 同理,是发生在水平方向溢出的情况,这里就不再过度赘述。

五. offsetX 、offsetY

  1. 我们恢复到最基本的样式。此时黑块没有任何 border 属性。
    image.png

  2. 那么此时的 offsetXoffsetY 就代表着距离自身左上角的距离。
    image.png

  3. 如果此时我们加上 10px 的border 的话,情况就会发生变化。
    image.png
    聪明的你可能已经看出来了,它起点的计算向内部压缩了一个 border 的宽度 。
    image.png

  4. 这里其实还有一个关键知识点,不知道你发现了没,这个属性和 layerXlayerY 很相似,我们测试一下当元素自身设置 relative 的时候,它的 layer 属性也是相对于自身开始的。
    image.png
    offsetXlayerX 有区别吗?

  5. 这里直接揭晓答案,即使我们设置了 border, layer 的属性也是没有受到任何影响的,依旧从元素最左上角开始计算距离。
    image.png

六. X、Y

  1. 是的,你没看错,就只是单纯的这两个字母,但是这两个属性也确确实实存在。
    image.png

  2. 经过查阅可知,它其实就是 clientX,所以我们不再重复。
    image.png

七. 总结:

这篇文章是由我随手做的笔记改编而来,笔记内容比较粗糙,转化为文章后个人感觉又重新复习了一遍,加深了很大的印象。如果该文章能帮助到一些人,也是一件幸事。

可能我以后也会经常来翻阅自己的这篇文章~这几个属性确实容易搞混🤔

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/376060.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

golang 实现链表爽不爽?

犹记得刚学 C 语言的时候,学到指针这一章,就会有让我们写链表的需求,头插法,尾插法,翻转链表,合并链表,约瑟夫环等等 学的不亦乐乎,但是 对于指针刚学的时候,真是摸不着…

DolphinDB实现动量交易策略详解

动量策略是最流行的量化策略之一。商品期货的CTA策略,绝大多数都是基于动量策略。在股票市场,动量策略也是常用的量化因子之一。通俗地讲,动量策略就是“追涨杀跌”。下面我们将介绍如何在DolphinDB中测试动量交易策略,并计算动量…

第三阶段04-同步请求和异步请求,get/post,Josn,pojo,Session/Cookie,过滤器Filter

文章目录同步请求和异步请求客户端如何发出异步请求自定义模板代码Get和Post请求异步版本的注册和登录商品管理系统(异步版本)商品列表步骤:前后端分离为什么需要前后端分离?为什么以后不再使用同步请求?JSONPOJO会话对象Session如何记住登录状态后端的MVC会话管理Cookie通过…

交叉编译 iceoryx

交叉编译 iceoryx 概述 iceoryx 是用于各种操作系统的进程间通信(IPC)中间件(目前支持 Linux、macOS、QNX、FreeBSD 和 Windows 10)。它起源于汽车行业,当涉及到驾驶员辅助或自动驾驶系统时,需要在不同的过…

一起来学 next.js - getStaticProps、getStaticPaths 篇

之前讲过 next.js 中的 getServerSideProps,今天来讲一讲另一个很类似的 API:getStaticProps,以及和 getStaticProps 紧密相关的 getStaticPaths。 getStaticProps 主要用于构建时落地一些静态数据,但不同于 getServerSideProps&…

动态规划背包问题

背包问题的分类 拿到背包问题,最重要的是会归类到哪一种背包问题中,常见的考题里主要是01背包和完全背包,leetcode上连多重背包的题目都没有。实际完全背包问题就是01背包的一种。 对一和零这道题,很多人容易把m看成一个背包,n看成另一个背包,从而当做多重背包。然而这…

ChatGPT创业潮来了,我既兴奋又焦虑

最近一段时间,ChatGPT从AI领域破圈,成了互联网领域的新风口。创业者和投资人也兴奋起来了。 创业的方向已经很明了。做中国版对标ChatGPT的大模型,是显而易见的一条路。目前百度的“文心一言”已经呼之欲出,原美团联合创始人王慧…

超店有数分享:2023还有哪些tiktok数据值得关注?

目前,tiktok是全球增长最迅猛的社交媒体软件之一。很多商家瞄准了tiktok的变现转化潜力,纷纷入局tiktok电商赛道。在入局这个赛道之前,我们需要了解一些tiktok的相关数据,这样才能更好的了解大局,及时调整自己的业务情…

Swagger2基本使用

这里写目录标题废话篇前言什么是openAPISwagger简介Springfox使用篇swagger的基本使用废话篇 前言 接口文档对于前后端开发人员都十分重要。尤其近几年流行前后端分离后接口文档又变成重中之重。接口文档固然重要,但是由于项目周期等原因后端人员经常出现无法及时…

P21.为什么需要父子shell

脚本的不同执行方式是否会开启子shell 父Shell概念 (1)pstree查看父进程 如下命令安装pstree yum install -y psmiscsshd--sshd--bash--pstree 第一个sshd为操作系统自己启动的监听sshd服务的程序第二个sshd是shell连接过来启动的shell每次调用bash…

echarts scatter地图上渲染圆点

目录 实现效果实现步骤相关文件实现效果 如上图所示,我们经常遇到一些需求,在地图上根据数据的大小,再画一些直径不一的实心圆。 首先,我们得先把地图画好,再来画这些跟数据有关联的圆形。 为了方便scatter建立坐标系,我们采用geo来自定义绘制地图,而不是使用百度地图或…

前端面试题 —— 计算机网络(二)

目录 一、POST和PUT请求的区别 二、GET方法URL长度限制的原因 三、页面有多张图片,HTTP是怎样的加载表现? 四、HTTP2的头部压缩算法是怎样的? 五、说一下HTTP 3.0 六、HTTP协议的性能怎么样? 七、数字证书是什么&#xff1f…

DC-3 靶场学习

文章目录环境配置:信息搜集:漏洞利用:获取FLAG:环境配置: 还是让DC-3的靶场和kali处于同于网段即可。 DC-3靶场还需要修改一下CD/DVD设置(如下)。 信息搜集: 首先还是要获取靶机的…

市场上有很多低代码开发平台,不懂编程的人可以用哪些?

市场上有很多低代码开发平台,不懂编程的人可以用哪些?这个问题一看就是外行问的啦,低代码平台主打的就是一个“全民开发”,而且现在很多低代码平台都发展为零代码了,不懂编程也完全可以使用! 所谓低代码开…

一三九、vim使用介绍

键盘图 模式切换 移动光标 命令说明shift 6()至本行第一个非空字符shift 4($)至本行末尾w至下一个单词、标点开头W至下一个单词开头b至上一个单词、标点开头B至上一个单词开头ctrl b上翻一页ctrl f下翻一页ctrl d向下翻半页 此比较有用ctrl u向上翻半页 此比较有用gg文件开…

优思学院|DMAIC从入门到精通,轻松学会六西格玛的基本原理!

如果要用一个词汇总结六西格玛品质改进方法,那一定是DMAIC。这个简称列出了六西格玛过程改进中的步骤,提供了完成六西格玛项目的方法概述,就是:定义(Define)、测量(Measure)、分析&a…

Rust语言的基本介绍

rust缘起和目标 rust的英文是锈菌,是一种真菌,这种真菌的生命力非常顽强,其 在生命周期内可以产生多达5种孢子类型,这5种生命形态还可以相互转 化。“Rust”也有“铁锈”的意思,暗合“裸金属”之意,代表了R…

网络安全入门(黑客)学习路线-2023最新版

如何成为一名黑客,很多朋友在学习安全方面都会半路转行,作者菌就自个整理了一下知识内容和体系,肝了一个月后,整理出来最适合零基础学习的网络安全学习路线,果断收藏学习下路线。此篇博客讲的非常细,有兴趣…

Python中sys.argv[ ]与Cpp中int main(int argc char *argv[ ])的用法

Python中sys.argv[ ]与Cpp中int main(int argc char *argv[ ])的用法 文章目录Python中sys.argv[ ]与Cpp中int main(int argc char *argv[ ])的用法前言一、Python中sys.argv[]的用法二、Cpp中int main(int argc char *argv[])的用法Reference前言 最近在学习ROS,在…

前端纯函数和副作用概念,且在react上的体现详解

什么是纯函数 纯函数是这样一种函数,即相同的输入,永远会得到相同的输出的函数,而且没有任何可观察的副作用。 什么是副作用 副作用是在计算结果的过程中,系统状态的一种变化,或者与外部世界进行的可观察的交互。 个…