详细解释JavaScript中的坐标和距离

序言

在前端开发中，总是有各种各样的情况需要使用或计算坐标和距离。但是属性和方法很多，要熟练写下来并不容易。大部分现在只能查，费时费力。所以有整理记录的想法，加深印象，方便随时参考。

两个窗口对象

在浏览器中，窗口对象(注意w是小写的)指的是当前的浏览器窗口。它也是当前页面的顶层对象，即最高层对象，其他所有对象都是它的下级。如果变量未声明，默认情况下，它是顶级对象的属性。节选自《阮一峰 JavaScript 教程》

位置大小属性

window.screenX，window.screenY

只读属性

返回浏览器窗口左上角相对于当前屏幕左上角的水平和垂直距离(以像素为单位)。

窗口。内高，窗口。内宽

只读属性

返回当前窗口中网页可见区域的高度和宽度，即视口的大小(以像素为单位)。

请注意，这两个属性包括滚动条的高度和宽度。

窗户。外部高度，窗户。外部宽度

只读属性

返回浏览器窗口的高度和宽度，包括浏览器菜单和边框(像素)。

window.scrollX，window.scrollY

只读属性

别名：window.pagexooffset，window.pageyooffset。

返回页面的水平滚动距离和垂直滚动距离，均以像素为单位。

请注意，这两个属性的返回值不是整数，而是双精度浮点数。如果页面没有滚动，它们的值为0。

节选自《阮一峰 JavaScript 教程》

使用window.pageXOffset而不是window.scrollX来实现跨浏览器兼容性。另外，旧版本的IE(9)不支持这两种属性，所以这个问题必须通过其他非标准属性来解决。

摘自MDN:https://developer . Mozilla . org/zh-cn/docs/web/API/window/scrollx

窗口对象的方法

window.scrollTo()，window.scroll()，window.scrollBy()

Window.scrollTo方法-别名：window.scrollto方法

用于将文档滚动到指定位置。

它接受两个参数，表示滚动后窗口左上角的页面坐标。

您也可以接受配置对象作为参数。

window.scrollTo(选项)

配置对象选项有三个属性。

Top:滚动页面左上角的垂直坐标，即y坐标。左：滚动页面左上角的水平坐标，即X坐标。行为：表示滚动模式的字符串。有三种可能的值(平滑、即时和自动)，默认值为自动。window.scrollBy方法用于将网页滚动指定的距离(以像素为单位)。

它接受两个参数：水平向右滚动的像素和垂直向下滚动的像素。

注意：仔细理解两者的区别。

三个元素节点

元素节点对象对应于网页的HTML元素。每个HTML元素都被转换成DOM树上的一个元素节点对象(简称元素节点)。

相关属性

元素。客户端高度，元素。客户端宽度

返回元素的高度和宽度，它们始终是整数值。

如果元素是内联元素(display: inline)，返回值为0。

从盒子模型的概念来看，返回的数值计算包括元素的内容和填充，不包括边框和边距。

如果有滚动条，返回值将从滚动条占据的宽度或高度中减去。(即不包括滚动条)

//浏览器视口高度document.documentElement.clientHeight//页面总高度document . body . client height element . client left，Element.clientTop

分别返回元素的左边框宽度和上边框宽度，如果没有边框，则返回0。

也不支持内联元素。

(我不太明白这两个属性是做什么的.)

元素滚动高度，元素滚动宽度

返回当前元素的总高度和总宽度，包括溢出容器和当前不可见的部分。

包括填充区域。

包括虚拟元素的宽度和高度。

滚动条的宽度和高度不包括在内。

借助一个小演示了解：

div class=' box ' 666/div . box { width : 200 px；高度： 200 px；飞越：隐藏；border: 1px纯红；padding: 10px相对位置：} .box:after在{ position: absolutecontent :“”；宽度： 100 px；高度： 100像素；左： 100%；} let box=document.queryselector('。box ')console . log(box . scroll width)//320 console . log(box . scrollHeight)//220，我们可以看到box元素的scroll height为220，与我们提到的填充区域一致。

为什么box元素的scrollWidth是320？由于伪元素的位置和宽度，虽然伪元素的溢出是隐藏的，但是这个属性返回的值仍然包含它。

当然，它不仅包括它的宽度和高度，还包括它的位置。

例如，更改伪元素的css:

{ position : absolute }后的. box:aftercontent :“”；宽度： 100 px；高度： 100像素；左： 120%；top : 120%；}现在，您想猜猜盒子的滚动宽度和滚动高度是多少吗？

元素滚动顶部

读/写。设置该属性值将导致浏览器自动将当前元素滚动到相应的位置。

分别返回当前元素的水平滚动距离和垂直滚动距离。

对于那些没有滚动条的网页元素，这两个属性总是等于0。

要查看整个网页的水平和垂直滚动距离，请从document.documentElement元素中读取。

document . document element . scrolleftdocument . document element . scroltopelement . offsetheight，Element.offsetWidth

返回元素的高度和宽度，包括元素本身的高度和宽度、填充和边框以及滚动条的高度和宽度。

如果元素的显示为无，则返回0。

与clientHeight和clientWidth相比，我认为这对于属性更有用一点，因为更多时候我们需要获取元素的完整宽度和高度。

元素。偏移量

返回当前元素左上角相对于Element.offsetParent节点的水平和垂直位移。

说到这里，我们来看看Element.offsetParent:

Element.offsetParent属性返回最接近当前元素的父元素，其CSS的position属性不等于static。

如果元素不可见(显示属性为无)或位置固定(位置属性固定)，offsetParent属性返回null。

如果元素的所有上层节点的位置属性是静态的，那么Element.offsetParent属性指向一个元素。

节选自《阮一峰 JavaScript 教程》

相关法

Element.getBoundingClientRect()

返回一个对象，该对象提供当前元素的大小和位置等信息。

我经常用它来获取元素的宽度、高度和坐标。

此对象具有以下属性：

元素左上角相对于视口的宽度高度x横坐标y左右上下因为元素相对于视口的位置会随着页面的滚动而变化，所以代表位置的四个属性值不是固定的。如果你想得到绝对位置，你可以在左边的属性中添加window.scrollX，在最上面的属性中添加window . scroll。

节选自《阮一峰 JavaScript 教程》

四个鼠标事件

MouseEvent接口

Let event=new MouseEvent ('click '，{//.})由addEventListener添加的click事件生成的事件对象也是mouseevent实例。

事件对象，让box=document.queryselector('。box ')box . addevent listener(' click '，(e)={ console . log(e)//event object })，也就是MouseEvent实例，有很多属性，这里简单分析一下。

MouseEvent.clientX和MouseEvent.clientY

只读属性

返回鼠标位置相对于浏览器窗口左上角的水平和垂直坐标。(与滚动距离无关)

可以这样理解：

Client本来就是客户端的意思，web中的客户端就是浏览器，所以clientX和clientY自然是相对于浏览器而言的。

这两个属性也有别名MouseEvent.x和MouseEvent.y.

MouseEvent.screenX，MouseEvent.screenY

只读属性

返回鼠标位置相对于屏幕左上角(显示屏区域)的水平和垂直坐标。

屏幕就是屏幕，所以，你知道。

MouseEvent.offsetX，mouseevent . offset

只读属性

返回鼠标位置相对于目标节点(即当前元素)左上角填充边缘的水平距离和垂直距离。

Offset是偏移的意思，所以也可以理解为鼠标位置相对于目标元素内部左上角的偏移值与目标元素本身或外部元素无关。

“填充边”是什么意思？

让我们用图片说话：

在上图中，这三个元素由红色、蓝色和绿色边框区分开来。红色和蓝色边框宽1px，绿色边框宽30px。每个元素都有一个填充值。具体代码如下：

！-HTML-body div class=' parent ' div class=' hello ' hello/div/div/body/* CSS */body { border : 1px纯红；margin : 0；padding: 20px}.父{border: 1px纯蓝；填充-top : 50px；}.hello { width: 100px高度： 100像素；padding: 100pxborder: 30px纯绿色；}我们在hello元素中添加了点击时间监听功能：

//jslet hello=document . queryselector('。hello ')hello . addeventlistener(' Click '，(e)={ console . log(e)console . log(e . offsetx)console . log(e . offsety)})分别点击hello元素的绿色边框和空白区域，会发现前者值为负值，后者值为整数，从空白区域左上角开始计算。

这是短语“鼠标位置和目标节点(即当前元素)左上角填充边缘之间的水平和垂直距离”的含义。

MouseEvent.pageX，MouseEvent.pageY

只读属性

返回鼠标位置和文档左上角之间的距离。(包括滚动距离)

MouseEvent.movementX，MouseEvent.movementY

只读属性

返回当前位置和最后一个mousemove事件之间的水平和垂直距离。

显然，这两个属性一定与mousemove事件密切相关，所以我们再来看看mousemove事件：

当鼠标在节点内移动时触发。当鼠标继续移动时，事件将被连续触发。为避免性能问题，建议限制此事件的监控功能，如限制一段时间内只能运行一次。

说到这个，应该涉及到“节流”，我就不多说了。

这两个属性还是很有用的。虽然我以前没有用过，但我认为它们可以用来判断鼠标的移动方向。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。