浅谈clientX、offsetX、screenX、pageX

最新推荐文章于 2025-02-06 10:38:27 发布

Mancuoj

最新推荐文章于 2025-02-06 10:38:27 发布

阅读量2.8k

点赞数 4

分类专栏：前端学习文章标签： 1024程序员节 js javascript canvas offsetX

本文链接：https://blog.youkuaiyun.com/Mancuojie/article/details/120933887

版权

前端学习专栏收录该内容

15 篇文章

订阅专栏

clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。

clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。

screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。

pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而变动，它在计算时其实是以body左上角原点（即页面本身的左上角，而不是浏览器可见区域的左上角）为参考点计算的，这个相当于已经把滚动条滚过的高或宽计算在内了，所以无论滚动条是否滚动，他都是一样的距离值。

可以自己写一下代码试验一下，自行加入其他元素

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

<head>
    <title>Mancuoj</title>
</head>

<body>
    <p>移动鼠标看看：</p>
    <p id="screen-log"></p>


    <script>
        let screenLog = document.querySelector('#screen-log');
        document.addEventListener('mousemove', logKey);

        function logKey(e) {
            screenLog.innerText = `
                Screen X/Y: ${e.screenX}, ${e.screenY}
                Client X/Y: ${e.clientX}, ${e.clientY}
                Offset X/Y: ${e.offsetX}, ${e.offsetY}
                Page X/Y: ${e.pageX}, ${e.pageY}`;
        }
    </script>
</body>

</html>