浏览器的鼠标坐标值获取及pageX、clientX、screenX的差异

来源：互联网发布：苏州爱知科技底薪多少编辑：程序博客网时间：2024/09/21 08:18

写在前面

获取方法比较简单。重点在于理解三种值的实际意义。

代码

<p><strong>screen:</strong><span id="screen"></span></p><p><strong>client:</strong><span id="client"></span></p><p><strong>page:</strong><span id="page"></span></p>

三个段落分别用来显示其值。

$(document).ready(function () {        $(this).click(function (e) {            $("#screen").text("screenX:"+e.screenX+" screenY:"+e.screenY);            $("#client").text("clientX:"+e.clientX+" clientY:"+e.clientY);            $("#page").text("pageX:"+e.pageX+" pageY:"+e.pageY);        });    });

当用户在文文档中点击鼠标时，触发函数，从而将三种坐标值显示出来。

全文代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../../lib/jquery/jquery.js"></script></head><body><p><strong>screen:</strong><span id="screen"></span></p><p><strong>client:</strong><span id="client"></span></p><p><strong>page:</strong><span id="page"></span></p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p>jjj</p><script>    $(document).ready(function () {        $(this).click(function (e) {            $("#screen").text("screenX:"+e.screenX+" screenY:"+e.screenY);            $("#client").text("clientX:"+e.clientX+" clientY:"+e.clientY);            $("#page").text("pageX:"+e.pageX+" pageY:"+e.pageY);        });    });</script></body></html>

分析：当浏览器最大化即左侧边缘与屏幕左侧贴合时，pageX、clientX、screenX的值都是一样的。否则，screenX的值会比其他两个值大，这个差值正好是浏览器左侧边缘到屏幕左侧边缘的距离。
而对于Y值，一般情况下，screenY的值都比其他两个值大。这很好理解。在页面全屏时，仍然大，不过只大了一个像素值。当页面在纵向没有滚动条时，clientY与pageY的值是一样的。当页面向下滚动了一段距离时，pageY将比clientY的值大。因为，pageY是从文档的最上方开始计算，而clientY是鼠标距离浏览器窗口最上方的距离，发生滚动时，clientY是不考虑滚进去的那段距离的。

0 0