<script type="text/javascript">
var tips=null;
function createTips(event){
  if(tips===null){
    tips=document.createElement("div");
    tips.style.cssText="position:absolute;z-index:99999;padding:3px 6px;background-color:#333;color:#fff;border-radius:3px;box-shadow:0 0 5px #333;font-family:Arial;font-size:12px;";
    document.body.appendChild(tips);
  }
  event=event||window.event;
  var pageX=event.pageX,pageY=event.pageY;
  if(pageX===undefined){
    pageX=event.clientX+(document.body.scrollLeft || document.documentElement.scrollLeft);
  }
  if(pageY===undefined){
    pageY=event.clientY+(document.body.scrollTop || document.documentElement.scrollTop);
  }
  tips.innerHTML="客户区坐标 clientX="+event.clientX+" clientY="+event.clientY+
          "<br>页面坐标 pageX="+pageX+" pageY="+pageY+
          "<br>屏幕坐标 screenX="+event.screenX+" screenY="+event.screenY;

  tips.style.left=(tips.offsetWidth>pageX?pageX:pageX-tips.offsetWidth)+"px";
  tips.style.top=(tips.offsetHeight>pageY?pageY:pageY-tips.offsetHeight)+"px";
}
if(document.addEventListener){
  document.addEventListener("click",function(event){createTips(event);},false);
}else{
  document.attachEvent("onclick",function(event){createTips(event);});
}
</script>

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

这里为文档元素指定了onclick事件处理程序。当用户单击这个元素时，就会看到事件的客户端坐标信息。注意，这些值中不包括页面滚动的距离，因此这个位置并不表示鼠标在页面上的位置。通过客户区坐标能够知道鼠标是在视口中什么位置发生的，而页面坐标通过事件对象的pageX和pageY属性，能告诉你事件是在页面中的什么位置发生的。换句话说，这两个属性表示鼠标坐标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的。

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

IE8及更早版本不支持事件对象上的页面坐标，不过使用客户区坐标和滚动信息可以计算出来。这时候需要用到document.body(混杂模式)或document.documentElement(标准模式)中的scrollLeft和scrollTop属性。鼠标事件发生时，不仅会有相对于浏览器窗口的位置，还有一个相对于整个电脑屏幕的位置。而通过screenX和screenY属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。