js捕捉鼠标位置

在JavaScript中，可以通过监听鼠标事件来捕捉鼠标的当前位置。以下是相关基础概念及实现方式：

一、基础概念

鼠标事件
- 当用户在浏览器中的页面上进行鼠标操作（如移动、点击等）时就会触发相应的鼠标事件。常用的鼠标事件有mousemove（鼠标移动）、mousedown（鼠标按下）、mouseup（鼠标松开）、click（鼠标点击）等。

事件对象
- 在事件处理函数中，会自动传入一个事件对象（通常命名为event或者e），这个对象包含了与事件相关的各种信息，对于鼠标事件来说，其中就包含了鼠标的位置信息。

二、获取鼠标位置的方式

在浏览器中的坐标系统
- 在HTML页面中，有几种不同的坐标系统来确定元素的位置。
- 页面坐标（pageX/pageY）：相对于整个HTML文档的左上角（包含滚动条滚动的距离）。
- 视口坐标（clientX/clientY）：相对于浏览器可视窗口（视口）的左上角。
- 以下是一个简单的示例代码，用于在鼠标移动时获取鼠标在视口中的位置并显示在页面上：

<!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>
        #position {
            position: fixed;
            top: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div id="position">X: 0, Y: 0</div>
    <script>
        const positionDiv = document.getElementById('position');
        document.addEventListener('mousemove', function (e) {
            const x = e.clientX;
            const y = e.clientY;
            positionDiv.textContent = `X: ${x}, Y: ${y}`;
        });
    </script>
</body>

</html>

三、优势