jquery获取鼠标位置
获取鼠标位置的坐标
使用jQuery获取鼠标位置可以通过绑定mousemove事件实现。以下是获取鼠标在页面中的坐标(相对于文档)和相对于当前元素的坐标的方法:

$(document).mousemove(function(event) {
// 相对于文档的坐标
var pageX = event.pageX;
var pageY = event.pageY;
// 相对于当前视口的坐标
var clientX = event.clientX;
var clientY = event.clientY;
// 相对于当前触发事件的元素的坐标
var offsetX = event.offsetX;
var offsetY = event.offsetY;
});
获取鼠标在特定元素内的位置
如果需要获取鼠标在某个特定元素内的位置,可以使用以下代码:

$("#yourElementId").mousemove(function(event) {
// 获取鼠标相对于该元素的位置
var relativeX = event.pageX - $(this).offset().left;
var relativeY = event.pageY - $(this).offset().top;
console.log("X: " + relativeX + ", Y: " + relativeY);
});
实时显示鼠标位置
以下是一个完整的示例,实时显示鼠标在页面中的位置:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="mousePosition"></div>
<script>
$(document).mousemove(function(event) {
$("#mousePosition").text("X: " + event.pageX + ", Y: " + event.pageY);
});
</script>
</body>
</html>
注意事项
pageX和pageY是相对于整个文档的坐标,包含滚动距离。clientX和clientY是相对于当前视口的坐标,不包含滚动距离。offsetX和offsetY是相对于触发事件的元素的坐标。






