共计 2007 个字符，预计需要花费 6 分钟才能阅读完成。
区分三类坐标
屏幕坐标、可视窗口坐标、页面坐标有时不能迅速的对应起来，为了更好的区分三者，特意画了一张图如下：
屏幕坐标
顾名思义，即整个电脑屏幕上任意一点的位置坐标，对应的属性分别为 screenX，screenY, 范围如上图最外层红色边框范围，坐标为蓝色虚线对应的坐标。可以使用类似下面的代码取得鼠标事件的屏幕坐标:
var div = document.getElementById(“myDiv”);
EventUtil.addHandler(div, “click”, function(event){
event = EventUtil.getEvent(event);
alert(“Screen coordinates: ” + event.screenX + “,” + event.screenY);
});
上述代码中的 EventUtil 是一个事件工具函数，在文末会给出
客户区域（可视窗口）坐标
可以将浏览器分为两大块，即浏览器上部的用户操作栏（宝蓝色框所对应的区域）和下部的可视窗口区域（上图中棕色框所对应的区域），该坐标系（颜色为粉色）的原点位于可视窗口的右上角，对应的属性为 clientX,clientY 可以使用类似下列代码取得鼠标事件的客户端坐标信息:
var div = document.getElementById(“myDiv”);
EventUtil.addHandler(div, “click”, function(event){
event = EventUtil.getEvent(event);
alert(“Client coordinates: ” + event.clientX + “,” + event.clientY);
});
页面坐标
过客户区坐标能够知道鼠标是在视口中什么位置发生的，而页面坐标通过事件对象的 pageX 和 pageY 属性，能告诉你事件是在页面中的什么位置发生的。换句话说，这两个属性表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的（页面为蓝色边框对应的区域，坐标系为棕色坐标系）。以下代码可以取得鼠标事件在页面中的坐标:
var div = document.getElementById(“myDiv”);
EventUtil.addHandler(div, “click”, function(event){
event = EventUtil.getEvent(event);
alert(“Page coordinates: ” + event.pageX + “,” + event.pageY);
});
总结
第一次写技术类的文章，文中有不对的地方，敬请指出。另附上《JavaScript 高级程序设计》一书中总结的 EventUtil 事件工具函数：
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent(“on” + type, handler);
} else {
element[“on” + type] = handler;
}
},
// 它返回对 event 对象的引用
getEvent: function(event){
return event ? event : window.event;
},
// 它返回事件的目标
getTarget: function(event){
return event.target || event.srcElement;
},
// 用于取消事件的默认行为
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent(“on” + type, handler);
} else {
element[“on” + type] = null;
}
},
// 由于 IE 不支持事件捕获，因此这个方法在跨浏览器的情况下，也只能用来阻止事件冒泡。
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
};
