本文介绍在 JavaScript 中获取当前鼠标坐标的完整实现方案。通过判断 pageX/pageY 与 clientX/clientTop 等属性，兼容 Firefox、Chrome 及旧版 IE 浏览器。示例代码包含 HTML 结构、CSS 样式及核心 JS 逻辑，可直接复制使用以实时显示鼠标 X/Y 轴坐标。
JavaScript 获取鼠标坐标的跨浏览器实现
本文详细介绍一种在 JavaScript 中获取当前鼠标坐标的通用方法，旨在为开发者提供可参考的实现思路。
在实现鼠标坐标获取时，关键在于处理不同浏览器对坐标属性的支持差异。以下是具体的代码实现细节。
具体代码如下：
<html>
<head>
<title>javascript获取当前鼠标坐标</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function mousePosition(ev){
if(ev.pageX || ev.pageY){//firefox、chrome等浏览器
return {x:ev.pageX,y:ev.pageY};
}
return {// IE浏览器
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
document.getElementById('x').innerHTML = mousePos.x;
document.getElementById('y').innerHTML = mousePos.y;
}
document.onmousemove = mouseMove;
</script>
<style type="text/css">
h3{color:blue;}
p{line-height:30px;height:30px;font-size:14px;width:500px;}
span{color:orange;font-weight:bold;}
</style>
</head>
<body>
<h3>您的鼠标已经被跟踪</h3>
<p> X 轴坐标：<span id="x"></span></p>
<p> Y 轴坐标：<span id="y"></span></p>
</body>
</html>希望本文所述的代码示例对您的 JavaScript 编程工作有所帮助。