HTML部分
我们需要一个HTML文件来放置我们的脚本，这个文件可以很简单，只需要包含一个用于显示鼠标坐标的元素，比如一个<div>或者<span>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Coordinates</title>
<style>
#coordinates {
font-size: 24px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div id="coordinates">Move the mouse to see coordinates...</div>
<script src="script.js"></script>
</body>
</html>
JavaScript部分
我们在一个外部JavaScript文件（例如script.js）中编写代码来获取鼠标坐标并更新到HTML元素中。
// script.js
document.addEventListener('DOMContentLoaded', (event) => {
const coordinatesElement = document.getElementById('coordinates');
function updateCoordinates(event) {
let x = event.clientX; // 获取鼠标相对于视口的x坐标
let y = event.clientY; // 获取鼠标相对于视口的y坐标
coordinatesElement.innerText =Mouse Coordinates: X: ${x}, Y: ${y};
}
// 监听鼠标移动事件
window.addEventListener('mousemove', updateCoordinates);
});
解释代码
创建了一个<div>元素，ID为coordinates，用于显示鼠标的坐标。
引入了外部JavaScript文件script.js。
当文档加载完成后，添加一个事件监听器，确保在DOM完全加载后才执行JavaScript代码。
获取页面上ID为coordinates的元素。
定义一个函数updateCoordinates，该函数会在鼠标移动时被调用，它接收一个事件对象作为参数，从中提取鼠标的x和y坐标，然后更新coordinates元素的文本内容。
给window对象添加一个mousemove事件监听器，当鼠标移动时调用updateCoordinates函数。
运行项目
将上述HTML和JavaScript文件保存在同一个目录下，然后在浏览器中打开HTML文件，当你移动鼠标时，你应该会看到页面上显示当前的鼠标坐标。
这种方法适用于大多数现代浏览器，并且非常易于理解和实现，如果你有更复杂的需求，比如在不同的元素上获取鼠标坐标，或者处理触摸设备上的坐标，你可能需要进一步扩展这个基础示例。
以上内容就是解答有关“api获取鼠标坐标”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/700880.html
微信扫一扫 