关于前端:图解鼠标事件的-ScreenX-LayerXclientXPageXoffsetXX

前言： 完在上一篇文章
🎁如何实现原生 JS 的拖拽成果我中应用到了 MouseEvent 事件对象身上的 clienX 的属性，但同时我也留神到了事件对象身上对于 X 的相干属性还有很多，并且在挪动端开发中，这些属性须要频繁的用到，所以来总结一下这些对于 X 轴身上各个属性含意的不同。

一. 后期筹备

1. 在进行上面的内容之前，我心愿大家先把传统数学中坐标轴的 y 轴方向和 x 轴的正轴负轴方向的概念忘记掉。
2. 对于客户端来讲，它们采纳坐标系的方向有些许不同，如下图。

   造成这个的起因其实也很简略，你想一下，对于用户来讲，有用的区域就是咱们的整块屏幕，如果负轴的话就曾经超出屏幕之外了（下图的黄色区域），对咱们没有任何理论的意义。所以一般来讲对于屏幕坐标时，咱们就默认规定从左角开始向下为 y 坐标轴。

3. 对下面的解释其实不太谨严，然而能够让你有个大略的认知，从而不便咱们再解说上面几个属性不同时，让你有更粗浅的了解。
4. 让咱们制作一个点击事件来引入咱们明天的各个属性值。
5. 能够看到右侧呈现了很多对于 X，Y 的属性，接下来咱们一个一个去理解它们各自到底代表着什么。

二. ScreenX、ScreeY

1. 其实从 Screen 这个单词的意思就能大略猜出来它代表的是什么意思。“屏幕” 嘛！那必定是绝对于屏幕来讲的啊。
2. 最开始我在这里蛊惑的是上面这种状况, 当我把浏览器窗口放大的时候，这个 screenY 是代表着那根线的间隔呢？🤔
3. 咱们验证一下这个猜测，能够看出尽管咱们浏览器窗口放大了，然而咱们的 screenY 仍旧代表着咱们点击的点到整块电脑屏幕显示器的最顶部的间隔。

三. LayerX、LayerY

1. 这个属性须要搭配应用 position 定位的几个值能力看出不一样的中央。大抵概念为：如果元素本身的 position 属性不是 static，那么这个元素的 layer 就绝对于它本身的左上角开始计算。
2. 如下图所示，当我点击了该元素外部当前，它的 layerX 和 layerY 大小计算就是从左上角开始的。
3. 同理，如果本身没有设置定位的相干属性，也就是元素自身 position 属性为 static。那么它会向上寻找离得最近的 position 不为 static 的元素，而后从绝对于那个元素的左上角的间隔开始计算。如果都没有，那么最终寻找到 body 标签完结。

三. clientX、clientY

1. 仅从 client 这个单词来讲，如果你看过我之前的文章，那么我想你大略能够猜出来 clienX 和 clientY 代表着什么，它们之间其实有殊途同归之处，不然为啥都叫 client 呢？
   在这个场景，client 这个单词其实代表着 用户端 (代表浏览器窗口) 可视区域 的意思。
2. 如果你还不理解什么是 客户端可视区域，那么我强烈建议你点开上面的文章去理解一下，尤其你当前思考接触挪动端开发的话，那么上面三个属性是你必须晓得的知识点。
    🫱你必须晓得的 clientWidth, offsetWidth, scrollWidth.
3. 回到 clientX 和 clientY 上，在这里明确比通知大家一个概念：这两个值只关怀用户 以后屏幕 (浏览器窗口) 上可能看到的区域，并且从以后区域的左上角开始计算间隔。
4. 什么意思？咱们都晓得当 内容宽度或者高度 超出父容器设置的宽度高度的时候，会引发溢出。常见解决溢出的计划就是设置它的 overflow 属性，如 overflow-auto 等。
5. 咱们先创立一个溢出的场景，并且我把 clientX 的数值展现到了页面上。
6. 能够看出其实我在滑动的时候曾经屡次点击触发 onMouseDown 事件了，只不过对于咱们来讲，咱们能看到的区域仅仅只是容器最右边开始。（溢出的局部咱们是看不到的，咱们 client 也不关怀那 溢出的 那局部的间隔。）
7. 同理 clientY 也是不关怀溢出的局部，只关怀能看到的那局部。

四. PageX、PageY

1. 从下面刚刚讲过的 clientY 和 clientX 不关怀溢出的那局部。哪有人关怀溢出的那局部间隔吗？你别说还真有，那就是 pageX 和 pageY。
2. 因为这个属性是绝对于整个文档的左上角来开始计算的，所以咱们下面的溢出例子还触发不了这个属性的变动。咱们这里借助 MDN 的页面来解说，由下面 clientY 的常识能够失去，当咱们页面没滚动的时候，这个间隔其实就是 clientY 的间隔。
3. 你可能会纳闷，奇怪，咱们不是在解说 PageY 吗？怎么又回到 clientY 了？其实一点也不奇怪，在这种状况下，咱们的 pageY 和 clientY 是截然不同的，没有任何区别。
4. 然而！一旦产生了上面的状况，因为内容溢出导致页面产生了滚动。如下图：

   那么咱们的 PageY 属性记录的值就变成了 滚动的间隔 + clientY的间隔。如果你晓得 scroTop 所代表的含意，那么你能够很快得出上面的计算形式。
   pageY = scroTop + clientY
   如果你还不理解 scroTop 的相干常识，没关系，我同样讲过，你能够点击这里去自行理解。
   🫱对于应用 scrollTop 来实现 tab 栏的交互

5. pageX 同理，是产生在程度方向溢出的状况，这里就不再适度赘述。

五. offsetX、offsetY

1. 咱们复原到最根本的款式。此时黑块没有任何 border 属性。
2. 那么此时的 offsetX 和 offsetY 就代表着间隔本身左上角的间隔。
3. 如果此时咱们加上 10px 的border 的话，状况就会发生变化。

   聪慧的你可能曾经看进去了，它终点的计算向外部压缩了一个 border 的宽度。

4. 这里其实还有一个要害知识点，不晓得你发现了没，这个属性和 layerX 和 layerY 很类似，咱们测试一下当元素本身设置 relative 的时候，它的 layer 属性也是绝对于本身开始的。

   那 offsetX 和 layerX 有区别吗？

5. 这里间接揭晓答案, 即便咱们设置了 border, layer 的属性也是没有受到任何影响的，仍旧从元素最左上角开始计算间隔。

六. X、Y

1. 是的，你没看错，就只是单纯的这两个字母，然而这两个属性也确确实实存在。
2. 通过查阅可知，它其实就是 clientX，所以咱们不再反复。

七. 总结：

这篇文章是由我顺手做的笔记改编而来，笔记内容比拟毛糙，转化为文章后个人感觉又从新温习了一遍，加深了很大的印象。如果该文章能帮忙到一些人，也是一件幸事。

可能我当前也会常常来翻阅本人的这篇文章～这几个属性的确容易搞混🤔