pageX和clientX的区别

周百万.

已于 2022-11-28 14:52:30 修改

阅读量3.8k

点赞数 3

分类专栏： javascript 文章标签： javascript e.pagex e.client page和client的区别前端

于 2022-08-13 11:06:54 首次发布

本文链接：https://blog.csdn.net/m0_45142186/article/details/126315694

版权

javascript 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

定义：

代码求证

结论：

定义：

e.page:返回鼠标相对于文档页面的左上角的坐标（滚轮滑动时改变）

page的大小=页面滚动部分大小+距离窗口可视区距离的大小(距离整个文档左上角距离的大小)

e.client:返回鼠标相对于浏览器窗口可视区的坐标（滚轮滑动不变）

client的大小=距离窗口可视区的大小

代码求证

注意点：上下滑动要比较pageY和clientY，比较pageX和clientX没有意义

页面中有一个50*50大小绝对定位的盒子，如下图所示

当点击页面中某个位置的时候，输出当前鼠标点击位置的 e.clientX值和 e.pageX值，代码如下所示

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: absolute;
            top: 500px;
            left: 500px;
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
        
        .nav {
            width: 3000px;
            height: 3000px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="nav"></div>

    <script>
        document.addEventListener('click', function(e) {
            console.log('clientY: ' + e.clientY);
            console.log('pageY: ' + e.pageY);
        })
    </script>
</body>

</html>

1、当点击如下所示小黄点，clientY：521px,pageY:521px

2、滑动滚轮，鼠标位置保持在屏幕原来位置上，再次点击小黄点的位置。

clientY:524px , pageY:968px

可以看出clientY的值是没有变化的，pageY的值进行了变化

因为pageY的大小不仅是窗口可视区距离目标位置的大小，还要加上滚动的距离

结论：

当滚动条没有滚动时，鼠标点击client和page 的大小是相等的，

当滚动条滚动时，鼠标点击page的大小会变化=距离文档左上角距离的大小，

client始终是距离窗口可视区距离的大小

周百万.

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
pageX和clientX的区别

e.page:返回鼠标相对于文档页面的左上角的坐标（滚轮滑动时改变）page的大小=页面滚动部分大小+距离窗口可视区距离的大小(距离整个文档左上角距离的大小)e.client:返回鼠标相对于浏览器窗口可视区的坐标（滚轮滑动不变）client的大小=距离窗口可视区的大小代码求证注意点：上下滑动要比较pageY和clientY，比较pageX和clientX没有意义页面中有一个50*50大小绝对定位的盒子，如下图所示。.........
复制链接

扫一扫