：
Element.offsetParent 属性返回最靠近当前元素的、并且 CSS 的 position 属性不等于 static 的上层元素。
如果该元素是不可见的（display属性为none），或者位置是固定的（position属性为fixed），则offsetParent属性返回null。
如果某个元素的所有上层节点的position属性都是static，则Element.offsetParent属性指向元素。
摘自《阮一峰 java script 教程》
相关方法
Element.getBoundingClientRect()
返回一个对象，提供当前元素的大小、位置等信息。
我常用来它获取元素的宽高和坐标。
该对象有如下属性：
- width
- height
- x 元素左上角相对于 视口 的横坐标
- y
- left
- right
- top
- bottom
由于元素相对于视口（viewport）的位置，会随着页面滚动变化，因此表示位置的四个属性值，都不是固定不变的。如果想得到绝对位置，可以将 left 属性加上 window.scrollX ， top 属性加上 window.scrollY。
摘自《阮一峰 java script 教程》
四 鼠标事件
MouseEvent 接口
let event = new MouseEvent('click', {
// ...
})
通过 addEventListener 添加的 click 事件所产生的事件对象也是 MouseEvent 实例。
let box = document.querySelector('.box')
box.addEventListener('click', (e) => {
console.log(e) // 事件对象
})
这个事件对象，也就是 MouseEvent 实例，有很多属性，这里来简单分析一下。
MouseEvent.clientX 和 MouseEvent.clientY
只读属性
分别返回鼠标位置相对于 浏览器窗口 左上角的水平坐标和垂直坐标。（不受滚动距离的影响）
可以这样理解：
client 本来就是客户端的意思，web 中的客户端就是浏览器，那 clientX 和 clientY 自然就是相对于浏览器的位置了。
这两个属性还分别有一个别名 MouseEvent.x 和 MouseEvent.y 。
MouseEvent.screenX，MouseEvent.screenY
只读属性
分别返回鼠标位置相对于 屏幕（显示器屏幕区域） 左上角的水平坐标和垂直坐标。
screen 是屏幕的意思，所以，你懂的。
MouseEvent.offsetX，MouseEvent.offsetY
只读属性
分别返回鼠标位置相对于 目标节点（即当前元素） 左上角 padding 边缘 的 水平距离和垂直距离。
offset 有偏移的意思，所以这里也可以理解为鼠标位置相对于目标元素内部左上角的偏移值，和目标元素本身以及外部的元素都无关。
那 「padding 边缘」是什么意思呢？
我们拿图说话：
上图中三个元素分别有红蓝绿三种边框来区分，红蓝边框宽度为 1px ， 绿边框为 30px 。每个元素都有 padding 值。具体代码如下：
<!-- HTML -->
<body>
<div class="parent">
<div class="hello">Hello</div>
</div>
</body>
/* css */
body {
border: 1px solid red; margin: 0; padding: 20px;
}
.parent {
border: 1px solid blue; padding-top: 50px;
}
.hello {
width: 100px; height: 100px; padding: 100px; border: 30px solid green;
}
我们给 hello 元素添加一个 click 时间监听函数：
// js
let hello = document.querySelector('.hello')
hello.addEventListener('click', (e) => {
console.log(e)
console.log(e.offsetX)
console.log(e.offsetY)
})
分别点击 hello 元素的绿色边框和空白区域，会发现前者的值为负数，后者的值为整数，且都是相对空白区域的左上角开始计算的。
这就是我们一开始提到的 「鼠标位置相对于 目标节点（即当前元素） 左上角 padding 边缘 的 水平距离和垂直距离」 这句话的意思。
MouseEvent.pageX，MouseEvent.pageY
只读属性
分别返回鼠标位置相对于文档左上角的距离。（包括滚动距离）
MouseEvent.movementX，MouseEvent.movementY
只读属性
返回当前位置与上一个 mousemove 事件之间的水平距离和垂直距离。
很明显这两个属性和 mousemove 事件肯定有着密切的关系，所以我们再了解一下 mousemove 事件：
当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。
说到这个应该会牵扯到「节流」，暂不深入了。
这两个属性还是很有用的，我虽然没咋用过，不过目前想来可以用来判断鼠标的移动方向等。
参考链接：
window 对象 - WangDoc.com
Element 节点 - WangDoc.com
鼠标事件 - WangDoc.com
（完）