js获取鼠标坐标

在JavaScript中获取鼠标坐标，可以通过监听鼠标移动事件（mousemove）来实现。

一、基础概念

事件监听
- 在JavaScript中，可以使用addEventListener方法来为特定的DOM元素添加事件监听器。对于获取鼠标坐标，我们要监听mousemove事件，这个事件会在鼠标在元素内移动时不断触发。

鼠标坐标属性
- 当mousemove事件触发时，事件对象（通常命名为event或者e）包含了鼠标的坐标信息。在浏览器环境下，主要有clientX、clientY、pageX、pageY、screenX和screenY等属性。
  - clientX和clientY：表示鼠标相对于浏览器可视窗口（不包括滚动条部分）的水平和垂直坐标。
  - pageX和pageY：表示鼠标相对于整个HTML文档（包括滚动条部分）的水平和垂直坐标。
  - screenX和screenY：表示鼠标相对于用户屏幕的水平和垂直坐标。

二、示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <title>获取鼠标坐标</title>
</head>

<body>
    <div id="坐标显示"></div>
    <script>
        document.addEventListener('mousemove', function (e) {
            var clientX = e.clientX;
            var clientY = e.clientY;
            var pageX = e.pageX;
            var pageY = e.pageY;
            var screenX = e.screenX;
            var screenY = e.screenY;
            document.getElementById('坐标显示').innerHTML = 'clientX: ' + clientX + '<br>clientY: ' + clientY + '<br>pageX: ' + pageX + '<br>pageY: ' + pageY + '<br>screenX: ' + screenX + '<br>screenY: ' + screenY;
        });
    </script>
</body>

</html>

三、优势