// 获取鼠标坐标有两种主要方式，取决于你想获取相对于什么位置的坐标：
// 1. 相对于视口 (viewport) 的坐标：
document.addEventListener('mousemove', function(event) {
const x = event.clientX;
const y = event.clientY;
// 使用 x 和 y 坐标，例如显示在页面上
console.log(`视口坐标：X: ${x}, Y: ${y}`);
// 或更新页面元素的位置
// document.getElementById('mouse-coords').textContent = `X: ${x}, Y: ${y}`;
});
// 2. 相对于文档 (document) 的坐标：
document.addEventListener('mousemove', function(event) {
const x = event.pageX;
const y = event.pageY;
// 使用 x 和 y 坐标
console.log(`文档坐标：X: ${x}, Y: ${y}`);
});
// 3. 相对于特定元素的坐标：
const myElement = document.getElementById('my-element'); // 获取目标元素
myElement.addEventListener('mousemove', function(event) {
const x = event.offsetX;
const y = event.offsetY;
// 使用 x 和 y 坐标
console.log(`相对于 my-element 的坐标：X: ${x}, Y: ${y}`);
});
// 完整示例 (显示在页面上):
<!DOCTYPE html>
<html>
<head>
<title>鼠标坐标</title>
<style>
body { margin: 0; }
#mouse-coords {
position: fixed;
top: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px 10px;
border-radius: 5px;
}
#my-element {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="mouse-coords"></div>
<div id="my-element"></div>
<script>
const coordsDisplay = document.getElementById('mouse-coords');
const myElement = document.getElementById('my-element');
document.addEventListener('mousemove', (event) => {
coordsDisplay.textContent = `视口坐标：X: ${event.clientX}, Y: ${event.clientY}`;
});
myElement.addEventListener('mousemove', (event) => {
console.log(`相对于 my-element 的坐标：X: ${event.offsetX}, Y: ${event.offsetY}`);
});
</script>
</body>
</html>
解释:
-
event.clientX和event.clientY: 获取鼠标指针相对于浏览器视口 (viewport) 的 x 和 y 坐标。 视口是指浏览器窗口中当前可见的区域。 如果页面滚动，这些坐标不会改变。 -
event.pageX和event.pageY: 获取鼠标指针相对于整个文档的 x 和 y 坐标。 这包含了滚动条滚动的距离。 如果页面向下滚动 100px，pageY就会比clientY大 100。 -
event.offsetX和event.offsetY: 获取鼠标指针相对于触发事件的特定元素的 x 和 y 坐标。 例如，如果事件发生在一个<div>元素内，这些坐标就是相对于<div>左上角的。
选择哪种方法？
选择哪种方法取决于你的需求：
- 需要相对于浏览器窗口定位元素，使用
clientX和clientY。 - 需要考虑页面滚动，使用
pageX和pageY。 - 需要相对于特定元素内部的定位，使用
offsetX和offsetY。
这个更完整的示例包含了如何在页面上显示坐标，以及如何获取相对于特定元素的坐标，方便你更好地理解和应用。 记得根据你的具体需求选择正确的方法。
标签：const,鼠标,js,坐标,document,event,页面 From： https://www.cnblogs.com/ai888/p/18578073