测试浏览器：IE8, Chrome13, FF8, Safari5, Opera11
先上测试用例（用HTML5的doctype测试，也可看出未来的发展趋势，其他doctype可自行测试）：
空白区
点击
问：怎样获取鼠标相对于浏览器可视文档区域左上角的位置？
答：x, y和clientX, clientY皆可，但是x, y在IE下表示鼠标相对于文档开头的位置（即如果有滚到条的话，会计算在内），还有FF也不支持x, y
推荐： clientX, clientY
问：怎样获取鼠标相对于文档开头的位置？
答： IE：使用x, y
非IE：使用pageX, pageY
layerX, layerY其实也可以，但是IE和Opera不支持！
问：怎样获取鼠标相对于事件源(event.target||event.srcElement)左上角的位置？
答：offsetX, offsetY。但是FF不支持，怎样办呢？
1. 先获取鼠标相对于浏览器可视文档区域左上角的位置
2. 然后获取事件源相对于浏览器可视文档区域左上角的位置
3. 相减，收工
也许有人会问，这第2步怎么做啊？好吧，好人做到底！
HTMLElement.getBoundingClientRect()方法
返回值为：{top:xx, right:xx, bottom:xx, left:xx, width:xx, height:xx}
也就是说，一个元素的位置信息都给了，我们要做的就是:
var box = (e.target || e.srcElement).getBoundingClientRect(), offsetX = e.clientX - box.left, offsetY = e.clientY - box.top;
经测试，所有浏览器都和event.offsetX, event.offsetY保持一致（当然FF除外）
我的例子中，最后还检测了scrollLeft, scrollTop, clientLeft, clientTop，本来以为它们几个会作怪，可测试结果表明：
除了scrollTop，其他都是0（当然scrollLeft是因为没出现横向滚动条所致）
scrollTop各浏览器表现不尽相同，如下：
body.scrollTop的情况
IE, FF, Opera：0
Chrome, Safari：向上滚动的距离
documentElement.scrollTop的情况
IE, FF, Opera：向上滚动的距离
Chrome, Safari：0
最新评论