JavaScript鼠标事件对象中的坐标位置（客户区、页面、屏幕）详解及区别

坐标位置包括客户区坐标位置、页面坐标位置、屏幕坐标位置。

客户区坐标位置

鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中，分别表示事件发生时鼠标指针在视口中的水平和垂直坐标。
所有的浏览器都支持这两个属性。

用法：

var div = document.getElementById('myDiv');
EventUtil.addHandler(div, "click", function(event) {
    event = EventUtil.getEvent(event);
    alert(event.clientX + ',' + event.clientY);
});

---

页面坐标位置

通过客户区坐标能够知道鼠标是在视口的什么位置发生的，而页面坐标通过事件对象的 pageX 和 pageY 属性告诉你事件的发生位置。这两个属性表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的。

用法：

var div = document.getElementById('myDiv');
EventUtil.addHandler(div, "click", function(event) {
    event = EventUtil.getEvent(event);
    // alert(event.clientX + ',' + event.clientY);
    alert(event.pageX + ',' + event.pageY);
});

在页面没有滚动的情况下，pageX 和 pageY 的值与 clientX 和 clientY 的值相等。

---

屏幕坐标位置

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

用法：

var div = document.getElementById('myDiv');
EventUtil.addHandler(div, "click", function(event) {
    event = EventUtil.getEvent(event);
    // alert(event.clientX + ',' + event.clientY);
    // alert(event.pageX + ',' + event.pageY);
    alert(event.screenX + ',' + event.screenY);
});

---

三者之间的关系和区别

这三种属性的作用和用法都类似，都是以左上角作为中心点返回坐标。
区别就是参考的点不同。客户区坐标是以浏览器客户区的左上角为中心；页面坐标就是以页面的左上角为中心；屏幕坐标是以屏幕的左上角为中心。