区分三类坐标

屏幕坐标、可视窗口坐标、页面坐标有时不能迅速的对应起来，为了更好的区分三者，特意画了一张图如下：

屏幕坐标

顾名思义，即整个电脑屏幕上任意一点的位置坐标，对应的属性分别为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);});

总结

第一次写技术类的文章，文中有不对的地方，敬请指出。

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;        }    },};