本文介绍如何利用 JavaScript 的 onmousemove 和 onmouseout 事件实时获取鼠标在指定区域内的坐标。通过绑定事件处理函数，可在鼠标移动时动态显示 clientX 和 clientY 值，并在离开区域时清空显示，适用于需要追踪鼠标位置的前端交互场景。
JavaScript 鼠标坐标获取原理
本文通过具体实例，详细解析了如何在 JavaScript 中利用 onmousemove 和 onmouseout 事件来捕获并显示鼠标的实时坐标位置。该方案旨在为开发者提供一套清晰、可复用的参考代码，便于在实际项目中集成应用。
以下 JavaScript 代码片段展示了 onmousemove 和 onmouseout 事件的具体用法。当鼠标在设定的矩形区域内移动时，系统会动态计算并显示当前的鼠标坐标信息；一旦鼠标移出该区域，坐标显示将被清空。
HTML 结构与服务端脚本实现
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(e)
{
x=e.clientX;
y=e.clientY;
coor="Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML=coor
}
function clearCoor()
{
document.getElementById("demo").innerHTML="";
}
</script>
</head>
<body style="margin:0px;">
<div id="coordiv" style="width:199px;height:99px;border:1px solid"
onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
<p>Mouse over the rectangle above,
and get the coordinates of your mouse pointer.</p>
<p id="demo"></p>
</body>
</html>希望本文提供的代码示例和原理说明，能对各位读者在 JavaScript 程序设计及前端交互开发方面提供实质性的帮助。