当前位置：首页 > jquery

jquery获取鼠标位置

2026-02-04 00:00:30jquery

获取鼠标位置的坐标

使用jQuery获取鼠标位置可以通过监听鼠标事件（如mousemove或click）来实现。以下是两种常见场景的代码示例：

监听鼠标移动事件

通过绑定mousemove事件，可以实时获取鼠标在当前页面中的坐标：

jquery获取鼠标位置

$(document).mousemove(function(event) {
    var x = event.pageX; // 相对于文档左侧的X坐标
    var y = event.pageY; // 相对于文档顶部的Y坐标
    console.log("X: " + x + ", Y: " + y);
});

监听点击事件

在点击时获取鼠标位置：

jquery获取鼠标位置

$(document).click(function(event) {
    var x = event.clientX; // 相对于视口左侧的X坐标
    var y = event.clientY; // 相对于视口顶部的Y坐标
    console.log("Clicked at X: " + x + ", Y: " + y);
});

坐标属性的区别

pageX/pageY：相对于整个文档的坐标（包含滚动偏移）。
clientX/clientY：相对于当前视口的坐标（不包含滚动偏移）。
screenX/screenY：相对于屏幕物理分辨率的坐标。

示例：显示坐标到页面元素

将鼠标位置动态显示到某个HTML元素中：

$(document).mousemove(function(event) {
    $("#coords").text("X: " + event.pageX + ", Y: " + event.pageY);
});

对应的HTML需包含一个ID为coords的元素：

<div id="coords"></div>

注意事项

如果需要在特定元素内获取相对坐标，可使用offset()方法计算差值：

$("#element").mousemove(function(event) {
    var offset = $(this).offset();
    var x = event.pageX - offset.left;
    var y = event.pageY - offset.top;
});