jt获取鼠标指针的位置

屏幕

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>

巴特西

jt获取鼠标指针的位置

最新文章

热门文章