本文详解如何在不同浏览器中准确获取鼠标位置。针对IE与Firefox在event对象属性（x/y与pageX/pageY）及滚动条计算上的差异，提供判断浏览器类型及累加document.documentElement滚动偏移量的兼容代码，确保坐标获取的一致性。
获取鼠标坐标的浏览器差异分析
获取鼠标位置看似简单，但若不熟悉各浏览器间的实现差异，开发过程可能会遇到诸多困扰。主要区别在于以下几个方面：
在IE浏览器中，获取鼠标相对于视口的X轴和Y轴距离，通常使用event.x和event.y属性；
而在Firefox等标准浏览器中，获取X轴和Y轴距离则需使用event.pageX和event.pageY属性；
此外，IE浏览器通过上述方式获取的坐标值不包含滚动条滚动的距离，即坐标原点始终位于浏览器视口的左上角；
Firefox等浏览器计算的坐标则包含了滚动条滚动的距离，反映的是元素在页面中的绝对位置；
这一差异曾导致大量代码需要重写，令人头疼；
跨浏览器兼容解决方案
解决属性名称不一致的问题，核心思路是进行浏览器类型判断，并调用相应的属性；
解决2的办法，是在IE的情况下在x和y轴分别加上document.documentElement.scrollTop和document.documentElement.scrollLeft；
由于对JS底层机制了解有限，若您有更优的解决方案，欢迎留言指正，谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS获得鼠标位置（兼容多浏览器ie,firefox）本站修正版</title> </head> <body> 鼠标 X 轴: <input id=xxx type=text> 鼠标 Y 轴: <input id=yyy type=text> </body> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]