鼠标位置

MouseEvent 接口指用户与指针设备(如鼠标)交互时发生的事件。使用此接口的常见

clientX/clientY

MousEvent.clientX 和 MousEvent.clientY 设置或获取鼠标指针位置相对于窗口客户区域的横纵坐标,其中客户区域不包括窗口自身的控件和滚动条。

clientX/clientY

offsetX/offsetY

MousEvent.offsetX 和 MousEvent.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的横纵坐标。

offsetX/offsetY

pageX/pageY

MousEvent.pageX 和 MousEvent.pageY 相对于整个网页左上角坐标。

pageX/pageY

screenX/screenY

MousEvent.screenX 和 MousEvent.screenY 设置或获取获取鼠标指针位置相对于用户屏幕的横纵坐标。

screenX/screenY

X/Y

MouseEvent.X 和 MouseEvent.Y 设置或获取鼠标指针位置相对于父文档的横纵坐标。

eventX.eventY

总结

属性说明
clientX设置或获取当事件被触发时鼠标指针相对于 浏览器页面(或客户区) 的水平坐标。
clientY设置或获取当事件被触发时鼠标指针向对于 浏览器页面(或客户区) 的垂直坐标。
screenX设置或获取当事件被触发时鼠标指针相对于屏幕的水平坐标
screenY设置或获取当事件被触发时鼠标指针相对于屏幕的垂直坐标
offsetX设置或获取鼠标指针位置相对于触发事件的对象的横坐标
offsetY设置或获取鼠标指针位置相对于触发事件的对象的纵坐标
X事件发生的位置的横坐标, 它相对于用 CSS 动态定位的最内层包容元素。
Y事件发生的位置的纵坐标, 它相对于用 CSS 动态定位的最内层包容元素。
pageX鼠标指针的位置,相对于文档的左边缘。
pageY鼠标指针的位置,相对于文档的上边缘。
layerX鼠标相比较于当前坐标系的位置。
layerY鼠标相比较于当前坐标系的位置。