当前位置：首页 > jquery

jquery获取鼠标位置

2026-03-16 20:42:54jquery

获取鼠标位置的坐标

使用jQuery可以方便地获取鼠标在页面中的位置坐标。以下是几种常见的方法：

监听鼠标移动事件

通过绑定mousemove事件，可以实时获取鼠标的坐标：

jquery获取鼠标位置

$(document).mousemove(function(event) {
    var x = event.pageX;
    var y = event.pageY;
    console.log("X: " + x + ", Y: " + y);
});

获取点击事件的坐标

在点击事件中获取鼠标位置：

jquery获取鼠标位置

$(document).click(function(event) {
    var x = event.clientX;
    var y = event.clientY;
    console.log("X: " + x + ", Y: " + y);
});

相对元素的位置

如果需要获取鼠标相对于某个元素的位置：

$("#element").mousemove(function(event) {
    var x = event.pageX - $(this).offset().left;
    var y = event.pageY - $(this).offset().top;
    console.log("Relative X: " + x + ", Relative Y: " + y);
});

坐标属性的区别

event.pageX / event.pageY：相对于文档的坐标（包含滚动偏移）。
event.clientX / event.clientY：相对于视口的坐标（不包含滚动偏移）。
event.screenX / event.screenY：相对于屏幕的坐标。

示例代码

以下是一个完整的示例，显示鼠标在页面中的位置：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="position">Move your mouse...</div>
    <script>
        $(document).mousemove(function(event) {
            $("#position").text("X: " + event.pageX + ", Y: " + event.pageY);
        });
    </script>
</body>
</html>