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>

 

posted @ 2018-04-26 22:22  Always_July  阅读(853)  评论(0)  编辑  收藏  举报