如何通过API获取鼠标位置？

K-seo • 2024-12-03 15:45 • 技术教程 • 6 views

要使用API获取鼠标位置，我们可以通过JavaScript来实现，以下是详细步骤和代码示例：

1、HTML部分: 创建一个HTML文件，并在其中添加一个元素来显示鼠标的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Position</title>
    <style>
        #mousePosition {
            font-size: 24px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Move the mouse around to see its position</h1>
    <div id="mousePosition">Move your mouse...</div>
    <script src="script.js"></script>
</body>
</html>

2、JavaScript部分: 在一个单独的JavaScript文件（例如script.js）中编写代码来捕获鼠标的位置并更新到HTML元素中。

document.addEventListener('DOMContentLoaded', (event) => {
    const mousePosition = document.getElementById('mousePosition');
    document.addEventListener('mousemove', (event) => {
        const x = event.clientX;
        const y = event.clientY;
        mousePosition.textContent =X: ${x}, Y: ${y};
    });
});