clientX、pageX、offsetX、screenX、offsetWidth、clientWidth等

文章目录

1、clientX 、clientY
2、pageX、pageY
注意： clientX和pageX的区别
3、offsetX、offsetY
4、screenX、screenY
5、offsetWidth、offsetHeight 、offsetLeft、offsetTop
6、clientWidth、clientHeight、clientLeft、clientTop
总结

1、clientX 、clientY

document.onclick = function (event){var clientX = event.clientX;var clientY = event.clientY;
}

这里的clientX和clientY是鼠标点击事件中点击的那个点在浏览器中的坐标

2、pageX、pageY

event.pageX 属性返回鼠标指针的位置，相对于文档的左边缘。

注意： clientX和pageX的区别

pageY = clientY + 纵向滚动条滚动的距离

clientX是相对于可视化窗口的坐标，即使有滚动条，即使滚动条滚动，在窗口(可视化窗口)相同的位置单击，坐标不变。
pageX的大小是可以根据滚动条的宽而变化，不仅仅是可视化窗口的坐标。

例子：对document添加点击事件，点击某一个位置（滚动条未滚动）：

点击某一个位置（滚动条滚动了）：

3、offsetX、offsetY

相对于所点击的元素的左上角的位置
例子：已知下方div的左外边距和上外边距都是100px，对于此div添加点击事件，结果如下：

4、screenX、screenY

screenX 鼠标事件属性
当触发事件时，screenX属性返回鼠标指针的水平坐标（根据用户计算机屏幕，而不是浏览器窗口）。
最右边为0，往左为负值

使用screenLeft和screenTop for IE8及更早版本

5、offsetWidth、offsetHeight 、offsetLeft、offsetTop

offsetWidth = width + 左右padding + 左右boder
offsetHeith = height + 上下padding + 上下boder

offsetLeft：当前元素 左边框外边缘 到最近的已定位父级（offsetParent） 左边框内边缘的距离。如果父级都没有定位，则分别是到body 顶部和左边的距离。
offsetTop：当前元素上边框外边缘到最近的已定位父级（offsetParent）上边框内边缘的距离。如果父级都没有定位，则分别是到body 顶部和左边的距离

6、clientWidth、clientHeight、clientLeft、clientTop

clientWidth = width + 左右padding
clientHeigh = height + 上下padding

clientLeft 属性返回元素左边框的宽度（border）。此属性不包括元素的左margin或左padding 。此属性是只读的。
提示：您还可以使用style.borderLeftWidth属性返回元素左边框的宽度。

clientTop属性返回元素顶部边框的宽度。此属性不包括元素的顶部填充或上边距。此属性是只读的。
提示：您还可以使用style.borderTopWidth属性返回元素顶部边框的宽度。

总结

offsetWidth = 100px(width) + 20px(左右padding) + 20px(左右border) = 140px;
clientWidth = 100px(width) + 20px(左右padding) = 120px;