JS：clientX/Y、screenX/Y、pageX/Y、offsetX/Y、layerX/Y、x/y

Event对象

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

Event对象只在事件发生的过程中才有效。

浏览器兼容性

FF：没有window.event对象。可以通过给函数的参数传递event对象。

示例代码：

clientX

clientX事件属性返回当事件被触发时鼠标指针相对于浏览器窗口（有效显示区域，不含滚动条）的水平坐标。

clientY

clientY事件属性返回当事件被触发时鼠标指针相对于浏览器窗口（有效显示区域，不含滚动条）的垂直坐标。

测试clientX、clientY及其它事件属性用到的代码：

下图中显示了页面滚动前后用鼠标点击绿色块上的红点时clientX和clientY。

浏览器兼容性

各浏览器都支持。在IE7中，clientX和clientY的计算起点不是浏览器窗口的有效显示区域，而是包括了有效显示区域边缘的2px的边框。

下图中的红色方框所在的位置是clientX和clientY的计算起点，而黄色的部分是浏览器窗口的有效显示区域。

screenX

screenX事件属性返回事件发生时鼠标指针相对于屏幕的水平坐标。

screenY

screenY事件属性返回事件发生时鼠标指针相对于屏幕的垂直坐标。

浏览器兼容性

所有的浏览器都支持，并且解释都一样。

pageX

pageX事件属性返回事件发生时鼠标指针相对于页面的水平坐标。不随页面滚动而发生变化。

pageY

pageY事件属性返回事件发生时鼠标指针相对于页面的垂直坐标。不随页面滚动而发生变化。

浏览器兼容性

只有IE不支持。解决方法是pageX/Y=clientX/Y+（页面滚去的宽度/高度）。

知识扩展

对于获取页面滚动条滚动的高度，除IE外的浏览器可以通过window对象的pageXOffset/pageYOffset属性来获取。对于IE来说就比较麻烦一点，它依赖当前文档类型。文档类型分为Standards Mode和Quirks Mode，页面声明了DOCTYPE时为Standards Mode，反之为Quirks Mode。可以使用document.compatMode来获取，该方法也同时支持其它浏览器，其返回值为BackCompat或CSS1Compat。

当文档类型为Standards Mode，获取方式为：document.documentElement.scrollTop；而Quirks Mode时则为：document.body.scrollTop。

示例代码：

function scrollLeft(){
    if ('pageXOffset' in window) {
        return window.pageXOffset;
    } else if (document.compatMode === "BackCompat") {
        return document.body.scrollLeft;
    } else {
        return document.documentElement.scrollLeft;
    }
}

offsetX

offsetX事件属性返回发生事件的地点在事件源元素的坐标系统中的x坐标。

offsetY

offsetY事件属性返回发生事件的地点在事件源元素的坐标系统中的y坐标。

浏览器兼容性

• 在Chrome、Safari、Opera中，事件源元素的坐标系统从border-box开始
• 在IE中，事件源元素的坐标系统从content-box开始。如果鼠标指针在border上，则会出现负值。
• FireFox不支持。
• 在IE7中，页面的坐标系统也包括了浏览器窗口的有效显示区域边缘的2px的灰色边框，但是起点还是和其它浏览器一样，即页面左上角（不包括灰色边框）。如果点击灰色边框，则会出现负值。

layerX

layerX事件属性返回鼠标相比较于当前坐标系的x坐标，即如果触发元素没有定位属性，以页面为参考点。如果有，将改变参考坐标系，以触发元素的border-box的左上角为参考点。

layerY

layerY事件属性返回鼠标相比较于当前坐标系的y坐标，即如果触发元素没有定位属性，以页面为参考点。如果有，将改变参考坐标系，以触发元素的border-box的左上角为参考点。

浏览器兼容性

只有IE不支持。

x

x事件属性返回鼠标相比较于当前坐标系的x坐标。

y

y事件属性返回鼠标相比较于当前坐标系的y坐标。

浏览器兼容性

• FireFox不支持。
• 在Chrome、Safari、Opera中，始终以页面为参考系。
• 在IE中，如果触发元素没有定位属性，以页面为参考点；如果有，将改变参考坐标系，以触发元素的border区域的左上角为参考点。
• 在IE8中，页面和触发元素的坐标系统的起点则比其它浏览器下移了2px。当点击页面起点时，结果是（-2，-2）。当点击触发元素的border-box的左上角时，结果是（-2，-2）。
• 在IE7中，（1）当以页面为参考时，页面的坐标系统也包括了浏览器窗口的有效显示区域边缘的2px的灰色边框，但是起点还是和其它浏览器一样，即页面左上角（不包括灰色边框）；如果点击灰色边框，则会出现负值。（2）当以触发元素为参考时，触发元素的坐标系统的起点则比其它浏览器下移了2px。当点击触发元素的border-box的左上角时，结果是（-2，-2）。