JavaScript获取鼠标坐标的跨浏览器兼容实现

JavaScript获取鼠标坐标的跨浏览器兼容实现

本文通过具体实例讲解JavaScript中获取鼠标位置的技术方法，供读者参考学习。

在网页开发中，获取鼠标（光标）在页面上的当前位置是常见需求，例如实现拖放功能或悬停提示（tooltip）。由于不同浏览器对相关属性的处理方式存在差异，本文详细分析了这些差异并提供最终的兼容解决方案。

相关JavaScript代码实现如下：

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script>

代码调用方式说明：

document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
}

以下对代码逻辑进行详细说明：

首先需要声明一个event对象。无论是鼠标移动、点击还是按键操作，都会触发一个event事件。在Internet Explorer浏览器中，event是全局变量，存储于window.event中；而在Firefox等其他浏览器中，event会作为相应函数的参数传递。当将mouseMove函数赋值给document.onmousemove时，该函数即可捕获鼠标移动事件。

为了确保ev变量在所有浏览器中都能正确获取event事件，在Firefox环境下“||window.event”这一逻辑不会生效，因为ev已经拥有赋值；而在MSIE浏览器中，由于ev初始为空，因此会取值为window.event。

鉴于本文需要多次获取鼠标位置，因此设计了一个名为mousePosition的函数，该函数接收一个event参数。

为了在MSIE及其他浏览器中正常运行，Firefox等浏览器使用event.pageX和event.pageY来表示鼠标相对于文档的位置。假设窗口尺寸为500*500且鼠标位于绝对中心，则pageX和pageY的值均为250；若向下滚动500像素，pageY的值将变为750。

MSIE浏览器则相反，它使用event.clientX和event.clientY表示鼠标相对于窗口的位置，而非文档。在同样的示例中，若向下滚动500像素，clientY的值仍保持为250。因此，我们需要加上scrollLeft和scrollTop这两个相对于文档的属性。此外，MSIE中文档起始坐标并非从0,0开始，通常存在一个小的边框（通常为2像素），其大小由document.body.clientLeft和clientTop定义，计算时也需要将这些值加入。

完整代码实现如下：

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
   if(ev.pageX || ev.pageY){
     return {x:ev.pageX, y:ev.pageY};
   }
   return {
     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
     y:ev.clientY + document.body.scrollTop - document.body.clientTop
   };
}
document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
   document.getElementByIdx('mouseXPosition').value = mousePos.x;
   document.getElementByIdx('mouseYPosition').value = mousePos.y;
}
</script>

希望本文所述内容能对大家的JavaScript程序设计有所帮助。