javascript获取鼠标坐标pageX和clientX的区别

最新推荐文章于 2024-04-28 15:52:12 发布

wangcuiling_123

最新推荐文章于 2024-04-28 15:52:12 发布

阅读量8.4k

点赞数 5

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/wangcuiling_123/article/details/73612134

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这两种获取鼠标坐标的方法，区别在于基于的对象不同：

pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变；

clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变；

鉴于有些朋友可能对案例有歧义，添加了标注解释和截图。

测试代码：案例中点击红点，页面显示获取的距离，在滚动条滑动到不同距离时(不要太多了，不然看不到点击的红点了)，再次点击红点，然后查看获取的距离，只有clientY(滑动y轴滚动条时clientY改变)，clientX改变(滚动x轴滚动条时clientX改变)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        body{
            width: 130%;
            height: 1500px;
        }
        #wrap{
            margin:300px auto;
            width:500px;
            height:200px;
            border:1px solid red;
            text-align: center;
            overflow: hidden;
        }
 
        #wrap .text{
            text-align: center;
            line-height: 50px;
            height: 50px;
        }
        #wrap .point{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: red;
            margin: 20px auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <p class="text">测试pageX和clientX的区别 点击红点</p>
        <p class="point"></p>
        <p class="mouse-position">
            红点距离窗口左上角clientX: <span id="clientX">--</span>, clientY: <span id="clientY">--</span><br>
            红点距离文档左上角pageX: <span id="pageX">--</span>, pageY: <span id="pageY">--</span>
        </p>
    </div>
</body>
<script>
    window.onload=function(){
        var oDiv = document.getElementById('wrap');
        oDiv.onmousedown = function(e){
            e = e || window.event;
            console.log('e.clientX:'+e.clientX+" e.clientY:"+e.clientY);
            console.log('e.pageX:'+e.pageX+" e.pageY:"+e.pageY);
            document.getElementById('clientX').innerText = e.clientX;
            document.getElementById('clientY').innerText = e.clientY;
            document.getElementById('pageX').innerText = e.pageX;
            document.getElementById('pageY').innerText = e.pageY;
 
        }
    }
</script>
</html>

案例截图：

本文主要是说明一下pageX、pageY与clientX、clientY的区别，便于理解。

wangcuiling_123

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
5
评论
javascript获取鼠标坐标pageX和clientX的区别

这两种获取鼠标坐标的方法，区别在于基于的对象不同：pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变；clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变；测试代码：案例中点击红点，滚动条滑动不同距离，查看获取的距离，只有clientY，clientX改变&lt;!DO...
复制链接

扫一扫