测试浏览器的版本: IETester 6 ,7 IE 8.0 Firefox 3.5.5 Chrome 4.1.249.1064 (45376) Opera 9.64 Safari 4.0 先来看看各个主流浏览器都有哪些坐标属性以及它们的意义 在IE中 event.offsetX event.offsetY 相对于e.srcElement坐标 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 event.clientX event.clientY 总是相对于视口 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 event.x event.y 虽然手册上说是相对于文档，但是ie6/7 中,他们俩的值跟clientX,clientY一致 但是这并不是严重的问题，因为视口相对坐标加上滚动条已卷去高度，依然可以得到真实的x(y),这个问题在ie8的标准模式下被解决 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。 event.screenX event.screenY 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 设置或获取获取鼠标指针位置相对于用户屏幕的 y 坐标。 在FireFox中 event.layerX event.layerY 相对于e.srcElement坐标 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 event.clientX event.clientY 总是相对于视口 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 event.pageX event.pageY 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。 event.screenX event.screenY 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 设置或获取获取鼠标指针位置相对于用户屏幕的 y 坐标。 实际上IE和Firefox已经囊括了所有的属性，其他的浏览器将这些属性进行了组合，但是意义完全一致 Chrome 和 Safari Chrome和Safari这哥俩办事儿则灰常周全，它们收录了所有的坐标属性，包括 event.offsetX event.offsetY event.layerX event.layerY event.clientX event.clientY event.x event.y event.pageX event.pageY 注意:Chrome和Safari的event.x event.y 跟IE6 7 的表现一致，它们和event.clientX,event.clientY相等 Opera坚定的走了ie6 7的道路，它拥有 event.offsetX event.offsetY event.clientX event.clientY event.x event.y 差点就和ie一模一样，幸好它有pageX,pageY event.pageX event.pageY 注意:Chrome和Safari,以及 Opera 的event.x event.y 都跟IE6 7 的表现一致，它们和event.clientX,event.clientY相等， 而在ie8中，event.x,event.y 则等同于 其他浏览器的event.pageX,event.pageY 为啥米layerX和offsetX, x,和pageX会在某些浏览器里重复出现捏？ 因为W3C并没有标准化这些属性，DOM3草案里MouseEvent部分沿用了DOM2的定义，只有两对属性 clientX of type long, readonly The horizontal coordinate at which the event occurred relative to the viewport associated with the event. clientY of type long, readonly The vertical coordinate at which the event occurred relative to the viewport associated with the event screenX of type long, readonly The horizontal coordinate at which the event occurred relative to the origin of the screen coordinate system. screenY of type long, readonly The vertical coordinate at which the event occurred relative to the origin of the screen coordinate system. 这下杯具了，所以支持标准的浏览器们都木有了方向，但是吧，浏览器厂商转念一想，W3C反正也弄不出幺蛾子来，肯定从offsetXY 和 layerXY, pageXY 和 xy中间挑一个，于是为了迎合标准，就把这两对属性就都放进了浏览器中。 不管怎么样，出了问题总是要解决掉。看到上面的兼容报告，代码雏形也就做好了 我们开始动手写！ getEventCoord