JS | JS中获得鼠标位置的属性有哪些？

目录

一、e.pageX，e.pageY

二、e.clientX，e.clientY

三、e.screenX，e.screenY

四、e.offsetX，e.offsetY

五、pageXOffset、pageYOffset

---

e.pageX/Y、e.clientX/Y、e.screenX/Y、e.offsetX/Y的区别 

一、e.pageX，e.pageY

e.pageX，e.pageY：返回的值是相对于文档的定位，即鼠标相对于整个页面左边（顶边）的坐标，包括视口之外的。文档的左上角为(0,0)，向右为正，向下为正，IE7，8不支持（不包含上方工具栏）；

如果你想要获取鼠标在整个页面中的位置，即鼠标指针在页面上的X和Y坐标（包括滚动条），可以使用pageX和pageY属性。

注意：IE7，8中没有pageX 和 pageY，只有用document.documentElement.scrollLeft+event.clientX来求出。 

二、e.clientX，e.clientY

e.clientX，e.clientY：返回的值是相对于屏幕可见区域的坐标，如果页面有滚动条，被滚动条隐藏的那部分不进行计算，也可以说是相对于屏幕的坐标，但是不计算上方的工具栏（不包含上方工具栏）。即鼠标相对于浏览器视口（即滚动条之外的部分忽略掉）的坐标；所有浏览器都支持。

在JavaScript中，可以使用事件对象的clientX和clientY属性来获取鼠标在当前窗口的位置。即鼠标指针在视口中的X和Y坐标（不包括滚动条）

clientWidth, clientHeight：包含 width+padding，不包含border;
scrollWidth,scrollHeight：包含 width+padding，不包含border;
offsetWidth, offsetHeight：包含 border+padding+width；
style.width, style.height：包含width，不包含border+padding

三、e.screenX，e.screenY

e.screenX，e.scree