前言: 完在上一篇文章
🎁如何实现原生 JS 的拖拽成果我中应用到了 MouseEvent
事件对象身上的 clienX
的属性,但同时我也留神到了事件对象身上对于 X 的相干属性还有很多,并且在挪动端开发中,这些属性须要频繁的用到,所以来总结一下这些对于 X 轴身上各个属性含意的不同。
一. 后期筹备
- 在进行上面的内容之前,我心愿大家先把传统数学中坐标轴的 y 轴方向和 x 轴的正轴负轴方向的概念忘记掉。
- 对于客户端来讲,它们采纳坐标系的方向有些许不同,如下图。
造成这个的起因其实也很简略,你想一下,对于用户来讲,有用的区域就是咱们的整块屏幕,如果负轴的话就曾经超出屏幕之外了(下图的黄色区域),对咱们没有任何理论的意义。所以一般来讲对于屏幕坐标时,咱们就默认规定从左角开始向下为 y 坐标轴。
- 对下面的解释其实不太谨严,然而能够让你有个大略的认知,从而不便咱们再解说上面几个属性不同时,让你有更粗浅的了解。
- 让咱们制作一个点击事件来引入咱们明天的各个属性值。
- 能够看到右侧呈现了很多对于 X,Y 的属性,接下来咱们一个一个去理解它们各自到底代表着什么。
二. ScreenX、ScreeY
- 其实从 Screen 这个单词的意思就能大略猜出来它代表的是什么意思。“屏幕” 嘛!那必定是绝对于屏幕来讲的啊。
- 最开始我在这里蛊惑的是上面这种状况, 当我把浏览器窗口放大的时候,这个
screenY
是代表着那根线的间隔呢?🤔 - 咱们验证一下这个猜测,能够看出尽管咱们浏览器窗口放大了,然而咱们的
screenY
仍旧代表着咱们点击的点到整块电脑屏幕显示器的最顶部的间隔。
三. LayerX、LayerY
- 这个属性须要搭配应用 position 定位的几个值能力看出不一样的中央。大抵概念为:如果元素本身的
position
属性不是static
,那么这个元素的layer
就绝对于它本身的左上角开始计算。 - 如下图所示,当我点击了该元素外部当前,它的
layerX
和layerY
大小计算就是从左上角开始的。 - 同理,如果本身没有设置定位的相干属性,也就是元素自身
position
属性为static
。那么它会向上寻找离得最近的position
不为static
的元素,而后从绝对于那个元素的左上角的间隔开始计算。如果都没有,那么最终寻找到 body 标签完结。
三. clientX、clientY
- 仅从 client 这个单词来讲,如果你看过我之前的文章,那么我想你大略能够猜出来
clienX
和clientY
代表着什么,它们之间其实有殊途同归之处,不然为啥都叫client
呢?
在这个场景,client
这个单词其实代表着 用户端 (代表浏览器窗口) 可视区域 的意思。 - 如果你还不理解什么是 客户端可视区域,那么我强烈建议你点开上面的文章去理解一下,尤其你当前思考接触挪动端开发的话,那么上面三个属性是你必须晓得的知识点。
🫱你必须晓得的 clientWidth, offsetWidth, scrollWidth. - 回到
clientX
和clientY
上,在这里明确比通知大家一个概念:这两个值只关怀用户 以后屏幕 (浏览器窗口) 上可能看到的区域,并且从以后区域的左上角开始计算间隔。 - 什么意思?咱们都晓得当 内容宽度或者高度 超出父容器设置的宽度高度的时候,会引发溢出。常见解决溢出的计划就是设置它的
overflow
属性,如 overflow-auto 等。 - 咱们先创立一个溢出的场景,并且我把
clientX
的数值展现到了页面上。 - 能够看出其实我在滑动的时候曾经屡次点击触发
onMouseDown
事件了,只不过对于咱们来讲,咱们能看到的区域仅仅只是容器最右边开始。(溢出的局部咱们是看不到的,咱们client
也不关怀那 溢出的 那局部的间隔。) - 同理
clientY
也是不关怀溢出的局部,只关怀能看到的那局部。
四. PageX、PageY
- 从下面刚刚讲过的
clientY
和clientX
不关怀溢出的那局部。哪有人关怀溢出的那局部间隔吗?你别说还真有,那就是pageX
和pageY
。 - 因为这个属性是绝对于整个文档的左上角来开始计算的,所以咱们下面的溢出例子还触发不了这个属性的变动。咱们这里借助 MDN 的页面来解说,由下面
clientY
的常识能够失去,当咱们页面没滚动的时候,这个间隔其实就是clientY
的间隔。 - 你可能会纳闷,奇怪,咱们不是在解说
PageY
吗?怎么又回到clientY
了?其实一点也不奇怪,在这种状况下,咱们的pageY
和clientY
是截然不同的,没有任何区别。 - 然而!一旦产生了上面的状况,因为内容溢出导致页面产生了滚动。如下图:
那么咱们的
PageY
属性记录的值就变成了滚动的间隔 + clientY
的间隔。如果你晓得scroTop
所代表的含意,那么你能够很快得出上面的计算形式。pageY = scroTop + clientY
如果你还不理解scroTop
的相干常识,没关系,我同样讲过,你能够点击这里去自行理解。
🫱对于应用 scrollTop 来实现 tab 栏的交互 pageX
同理,是产生在程度方向溢出的状况,这里就不再适度赘述。
五. offsetX、offsetY
- 咱们复原到最根本的款式。此时黑块没有任何 border 属性。
- 那么此时的
offsetX
和offsetY
就代表着间隔本身左上角的间隔。 - 如果此时咱们加上 10px 的
border
的话,状况就会发生变化。聪慧的你可能曾经看进去了,它终点的计算向外部压缩了一个
border
的宽度。 - 这里其实还有一个要害知识点,不晓得你发现了没,这个属性和
layerX
和layerY
很类似,咱们测试一下当元素本身设置relative
的时候,它的layer
属性也是绝对于本身开始的。那
offsetX
和layerX
有区别吗? - 这里间接揭晓答案, 即便咱们设置了
border
,layer
的属性也是没有受到任何影响的,仍旧从元素最左上角开始计算间隔。
六. X、Y
- 是的,你没看错,就只是单纯的这两个字母,然而这两个属性也确确实实存在。
- 通过查阅可知,它其实就是
clientX
,所以咱们不再反复。
七. 总结:
这篇文章是由我顺手做的笔记改编而来,笔记内容比拟毛糙,转化为文章后个人感觉又从新温习了一遍,加深了很大的印象。如果该文章能帮忙到一些人,也是一件幸事。
可能我当前也会常常来翻阅本人的这篇文章~这几个属性的确容易搞混🤔