鼠标指针的位置

Posted 2020-11-01 Always_July

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标指针的位置相关的知识，希望对你有一定的参考价值。

屏幕

screenX和screenY属性表示鼠标在整个显示屏的位置，从屏幕（而不是浏览器）的左上角开始计算的。

页面

pageX和pageY属性表示鼠标指针在这个页面的位置。页面的顶部可能在可见区域之外，所以即使鼠标指针位于同一位置，页面和客户端的坐标也可能不同。

客户端

clientX和clientY属性表示鼠标指针在浏览器可视区域中的位置。即使用户将页面向下滚动，使得页面顶部超出了可视区域，也不会影响客户端坐标。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <div id=‘body‘ style="width: 500px;height: 1500px;border: 1px solid red;padding: 0;margin: 0;"></div>
        <p id=‘sx‘></p>
        <p id=‘sy‘></p>
        <p id=‘px‘></p>
        <p id=‘py‘></p>
        <p id=‘cx‘></p>
        <p id=‘cy‘></p>
    </head>
    <body>
        <script type="text/javascript">
            var sx = document.getElementById(‘sx‘);
            var sy = document.getElementById(‘sy‘);
            var px = document.getElementById(‘px‘);
            var py = document.getElementById(‘py‘);
            var cx = document.getElementById(‘cx‘);
            var cy = document.getElementById(‘cy‘);
            
            function showPosition(e){
                sx.textContent =  e.screenX;
                sy.textContent =  e.screenY;
                px.textContent =  e.pageX;
                py.textContent =  e.pageY;
                cx.textContent =  e.clientX;
                cy.textContent =  e.clientY;
            }
            document.getElementById(‘body‘).addEventListener(‘mousemove‘,showPosition,false);
            
        </script>
    </body>
</html>

以上是关于鼠标指针的位置的主要内容，如果未能解决你的问题，请参考以下文章

更改'当我按下Ctrl键时显示指针的位置'来自代码的Windows设置

HTML-Tooltip 相对于鼠标指针的位置

在 SwiftUI for macOS 应用程序中获取点击手势的鼠标/指针位置

C# textbox中鼠标光标位置始终在最后谢谢

鼠标指针操作