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

来源：互联网发布：mac最新系统版本编辑：程序博客网时间：2024/06/08 04:38

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

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

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

测试代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>测试pageX和clientX的区别</title>    <style>        *{margin:0;padding:0;}        body {            height:3000px;            width:3600px;        }        #wrap{            margin:300px auto;            width:500px;            height:200px;            border:1px solid red;            text-align: center;            overflow: scroll;        }        #wrap p{            height:400px;        }    </style></head><body><div id="wrap">    <p>测试pageX和clientX的区别</p></div></body><script>    window.onload=function(){        var oDiv = document.getElementById('wrap');        oDiv.onmousemove = 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);        }    }</script></html>

阅读全文

0 0