web页面位置详解

1理解客户区坐标位置

 

　　含义是：鼠标指针在可视区中的水平clientX和垂直clientY坐标；

　　如下图所示：

　　

2理解页面坐标位置pageX和pageY：

 

　　pageX与pageY是指页面坐标的位置，与clientX和clientY的区别是：它包含页面滚动条的位置，如下图所示：

　　

但是IE8及更早的版本不支持pageX与pageY

EventUtil.addHandler(btn,'click',function(e){ e = EventUtil.getEvent(e); var pageX = e.pageX, pageY = e.pageY; if(!pageX) { pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); } if(!pageY) { pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop); } console.log("页面X轴坐标为:"+pageX + " "+ "页面Y轴坐标为:"+pageY); });

　3理解屏幕坐标的位置

　　屏幕横坐标screenX和垂直坐标screenY属性是相对于整个屏幕的。如下图所示：