dom 鼠标事件中的坐标位置

1. 客户区坐标位置

鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中。所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平 和垂直坐标。这些值中不包括页面滚动的距离，因此这个位置并不表示鼠标在页面上的位置。

 

2. 页面坐标位置 通过客户区坐标能够知道鼠标是在视口中什么位置发生的，而页面坐标通过事件对象的 pageX 和 pageY 属性，能告诉你事件是在页面中的什么位置发生的。换句话说，这两个属性表示鼠标光标在页面 中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的。 以下代码可以取得鼠标事件在页面中的坐标：也就是说，包含滚动条隐藏的内容的大小。

在页面没有滚动的情况下， pageX 和 pageY 的值与 clientX 和 clientY 的值相等。
IE8 及更早版本不支持事件对象上的页面坐标，不过使用客户区坐标和滚动信息可以计算出来。这
时候需要用到 document.body（混杂模式）或 document.documentElement（标准模式）中的
scrollLeft 和 scrollTop 属性。也就是说相加；

鼠标事件发生时，不仅会有相对于浏览器窗口的位置，还有一个相对于整个电脑屏幕的位置。而通
过 screenX 和 screenY 属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息