一、 获取窗口客户区中的坐标

       知识点总结：

用户窗口客户区中的水平偏移量。

用户窗口客户区中的垂直偏移量。

参照点 ( 原点 ) 是窗口客户区的左上角。不会随滚动条的移动而改变。

         

jquery 获取鼠标右击位置 jquery获取鼠标坐标_html

窗口客户区

         

 

        具体代码如下：

　　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>获取鼠标在窗口客户区中的坐标</title>
        <style type="text/css">
        </style>
        <script src="../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h2 id="h2-caption">jQuery获取鼠标在窗口客户区中的坐标</h2>
        <hr><br>
        <p>鼠标当前屏幕的坐标： <span></span></p>
        <script type="text/javascript">
            // 鼠标当前屏幕的坐标
            $(function(){
                // 鼠标移动 move
                $(document).mousemove(function(e){
                    getClientCoordinates(e);
                });
            });
            // 获取当前鼠标所在的位置
            // 
            function getClientCoordinates(e){
                x = e.clientX;
                y = e.clientY;
                $('span').text('X:'+x+',Y:'+y);
            }
        </script>
    </body>
</html>

 

二、获取鼠标在屏幕中的坐标

     知识点总结:

屏幕的水平偏移量

  e.screenY : 相对于屏幕的垂直偏移量

参照原点 : 屏幕左上角      

     

jquery 获取鼠标右击位置 jquery获取鼠标坐标_偏移量_02

   

 

     代码如下：

     

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>获取鼠标在屏幕中的坐标</title>
        <style type="text/css">
        </style>
        <script src="../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h2 id="h2-caption">jQuery获取鼠标在屏幕中的坐标</h2>
        <hr><br>
        <p>鼠标当前屏幕的坐标： <span></span></p>
        <script type="text/javascript">
            // 鼠标当前屏幕的坐标
            $(function(){
                // 鼠标移动 move
                $(document).mousemove(function(e){
                    getClientCoordinates(e);
                });
            });
            // 获取当前鼠标所在的位置
            // e.screenX : 相对于屏幕的水平偏移量
            // e.screenY : 相对于屏幕的垂直偏移量
            // 参照原点 : 屏幕左上角
            function getClientCoordinates(e){
                x = e.screenX;
                y = e.screenY;
                $('span').text('X:'+x+',Y:'+y);
            }
        </script>
    </body>
</html>

 

三、获取鼠标在窗口页面中的坐标

      知识点总结：

鼠标位置相对于用户页面区域的水平偏移量

鼠标位置相对于用户页面区域的垂直偏移量

窗口客户区的左上角，因此该参照点 会随滚动条的移动而移动

      

jquery 获取鼠标右击位置 jquery获取鼠标坐标_javascript_03

 

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>获取鼠标在屏幕中的坐标</title>
        <style type="text/css">
        </style>
        <script src="../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <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 /><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 /><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 /><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 /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <h2 id="h2-caption">jQuery获取鼠标在窗口页面中的坐标</h2>
        <hr><br>
        <p>鼠标当前窗口页面中的坐标： <span></span></p>
        <script type="text/javascript">
            // 鼠标当前窗口页面中的坐标
            $(function(){
                // 鼠标移动 move
                $(document).mousemove(function(e){
                    getClientCoordinates(e);
                });
            });
            // 获取当前鼠标所在的位置
            // e.pageX : 相对于用户页面区域的水平偏移量
            // e.pageY : 相对于用户页面区域的垂直偏移量
            // 参照原点 : 窗口客户区的左上角,参照点不会随滚动条的移动而移动
            function getClientCoordinates(e){
                x = e.pageX;
                y = e.pageY;
//                x = e.screenX;
//                y = e.screenY;
                $('span').text('X:'+x+',Y:'+y);
            }
        </script>
    </body>
</html>

 

 

这个简单的小例子就写完了。很简单吧。嘿嘿嘿！！！