JavaScript 实现鼠标坐标实时获取:onmousemove 与 onmouseout 应用

作者:页面旅途时间:2026-10-29 07:55:08浏览:239

本文介绍如何利用 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 程序设计及前端交互开发方面提供实质性的帮助。

作者最新文章