鼠标位置实时显示的网页实现-优快云博客

本文介绍如何在网页上实现实时显示鼠标位置的功能，包括JavaScript代码解析和DOM操作，通过创建一个div元素并设置其位置，实现鼠标移动时显示当前坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head runat="server">
    <script type="text/javascript">
        function getX(obj) {
            var parObj = obj;
            var left = obj.offsetLeft;
            while (parObj = parObj.offsetParent) {
                left += parObj.offsetLeft;
            }
            return left;
        }

        function getY(obj) {
            var parObj = obj;
            var top = obj.offsetTop;
            while (parObj = parObj.offsetParent) {
                top += parObj.offsetTop;
            }
            return top;
        }

        function DisplayCoord(event) {
            var top, left, oDiv;
            oDiv = document.getElementById("demo");
            top = getY(oDiv);
            left = getX(oDiv);
            document.getElementById("mp_x").innerHTML = (event.clientX - left + document.body.scrollLeft) + "px";
            document.getElementById("mp_y").innerHTML = (event.clientY - top + document.body.scrollTop) + "px";
        }
    </script>
</head>
<body style="margin: 40px;" mce_style="margin:40px;">
    <div style="background-color: #000000; color: #0011FF; width: 300px; height: 300px;
        position: absolute; top: 80px; left: 90px; margin: 0px; border: 0px;" id="demo"
        onmousemove="DisplayCoord(event)">
    </div>
    当前鼠标坐标为： X：<span id="mp_x"></span> Y：<span id="mp_y"></span>
</body>