JavaScript 获取鼠标坐标的跨浏览器兼容方案

获取鼠标坐标的浏览器差异分析

获取鼠标位置看似简单，但若不熟悉各浏览器间的实现差异，开发过程可能会遇到诸多困扰。主要区别在于以下几个方面：

在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>