取得鼠标事件的坐标

说明:

• clientX和clientY属性：事件发生时,鼠标指针在视口中的水平和垂直坐标。
• pageX和pageY属性：鼠标光标在页面中的位置。
• screenX和screenY属性：鼠标事件发生时，鼠标指针相对于整个屏幕的坐标信息。
• IE8及更早的版本不支持事件对象上的页面坐标（pageX,pageY）。
• EventUtil参考上一篇。

// 取得鼠标事件在页面中的坐标
var div =document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event) {
    event = EventUtil.getEvent(event);
    var pageX = event.pageX,
        pageY = event.pageY;
    if (pageX === undefined) {    // 兼容IE8及以下
        pageX = event.clientX + (document.body.scrollLeft || document.document.scrollTop);
    }
    if (pageY === undefined) {
        pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
    }
    
    alert("Page coordinates: " + pageX + "," + pageY);
});

//取得鼠标事件的屏幕坐标
var div = document.getElementById("maDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});

摘自《JavaScript高级程序设计》(第3版) P371