Jquery 获取鼠标位置坐标

封面图 • 2025-10-30 • jQuery

在 jQuery 中，你可以通过监听鼠标事件（如 `mousemove`）来获取鼠标的坐标。以下是几种常见的方法：

---

### ✅ 方法一：使用 `event.pageX` 和 `event.pageY`

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

- `pageX` 和 `pageY` 是相对于整个页面的坐标。
- 适用于大多数情况。

---

### ✅ 方法二：使用 `event.clientX` 和 `event.clientY`

```javascript
$(document).on('mousemove', function(event) {
    var x = event.clientX;
    var y = event.clientY;
    console.log('X: ' + x + ', Y: ' + y);
});
```

- `clientX` 和 `clientY` 是相对于浏览器视口（viewport）的坐标。
- 如果页面有滚动，它们不会自动调整，而 `pageX` 会。

---

### ✅ 方法三：获取某个元素内的坐标

如果你只想获取某个特定元素内的鼠标位置，可以这样做：

```javascript
$('#myElement').on('mousemove', function(event) {
    var offset = $(this).offset();
    var x = event.pageX - offset.left;
    var y = event.pageY - offset.top;
    console.log('X inside element: ' + x + ', Y inside element: ' + y);
});
```

- `offset()` 获取的是元素相对于文档的位置。
- 通过减去这个偏移量，可以得到鼠标在该元素内部的坐标。

---

### ✅ 示例：实时显示鼠标坐标

```html
<!DOCTYPE html>
<html>
<head>
    <title>Mouse Position</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<p>移动鼠标查看坐标：</p>
<div id="output"></div>

</body>
</html>
```

---

### 总结

| 属性         | 描述                           |
|--------------|--------------------------------|
| `event.pageX` | 鼠标相对于整个页面的 X 坐标     |
| `event.pageY` | 鼠标相对于整个页面的 Y 坐标     |
| `event.clientX` | 鼠标相对于浏览器视口的 X 坐标 |
| `event.clientY` | 鼠标相对于浏览器视口的 Y 坐标 |

根据你的需求选择合适的方法即可。需要我帮你写一个具体的应用场景吗？