鼠标事件中各种位置

鼠标事件都是在browser中的特定位置发生的，而我们可以通过事件对象event的各种属性获取到鼠标事件发生的位置。
（1）客户区坐标位置
这一位置是相对于视口而言，所谓视口就是你所看到的browser展示页面的大小。不包括browser的菜单栏和滚动条覆盖的部分。

    event.clientX;
    event.clientY;

（2）页面坐标位置（IE8及以下不支持这一属性）
该坐标是相对于页面而言的，页面就是整个网页页面。它包括了滚动条覆盖的页面部分，也不包括browser菜单栏部分。

    event.pageX;
    event.pageY;

a.在无滚动条的情况下，clientX、clientY和pageX、pageY是相同的。
b.若在IE8及以下内想得出页面坐标，则可以使用滚动事件获取滚动信息和客户区坐标

var div=document.getElementById("div");
div.attachEvent('onclick',function(event){
    var pageX=event.pageX;
    var pageY=event.pageY;
    if(pageX==='undefined'){
        pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
        pageY=event.clientY+(document.body.scrollTop||document.document.documentElement.scrollTop);
}
})

（3）屏幕坐标
该坐标相对于屏幕左上角而言，也就是说和clientX、clientY相比多了browser的菜单栏部分。

event.screenX;
event.screenY

（4）layerX、layerY
这个属性用的相对少点，当元素是绝对定位时（position：absolute），相对于元素自身的左上角定位

event.layerX;
event.layerY;

!<–只是个人总结，如有不对的地方，请尽情喷哈哈哈哈哈–>