获取鼠标的位置/坐标-阿里云开发者社区

获取鼠标的位置/坐标

2016-05-10 1750

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

使用JavaScript 如何获取鼠标的位置呢?

获取光标的位置获取鼠标坐标

先看效果

核心方法:

   Js代码  
    
  
/*** 
 * 返回鼠标的坐标 
 * @param e 
 * @returns {{x: (Number|pageX|*), y: (Number|pageY|*)}} 
 */  
var getCoordInDocument = function(e) {  
    e = e || window.event;  
    var x = e.pageX || (e.clientX +  
        (document.documentElement.scrollLeft  
            || document.body.scrollLeft));  
    var y= e.pageY || (e.clientY +  
        (document.documentElement.scrollTop  
            || document.body.scrollTop));  
    return {'x':x,'y':y};  
}  

页面代码:

   Html代码  
    
  
<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <script type="text/javascript" src="svn_js/common_util.js"></script>  
    <script type="text/javascript">  
        var getCoordInDocumentExample = function(){  
            var coords = document.getElementById("coordAreas");  
            coords.onmousemove = function(e){  
                var pointer = getCoordInDocument(e);  
                var coord = document.getElementById("coord");  
                coord.innerHTML = "X,Y=("+pointer.x+", "+pointer.y+")";  
            }  
        }  
  
        window.onload = function(){  
            getCoordInDocumentExample();  
        };  
    </script>  
</head>  
<body>  
<div id="coordAreas" style="width:500px;height:200px;background:#F2F1D7;border:2px solid #9C89CB;border-radius: 5px 5px 5px 5px;">  
    请在此移动鼠标。  
</div>  
<br />  
<div id="coord" style="width:500px;border:2px solid #9C89CB;border-radius: 5px 5px 5px 5px;">&nbsp;</div>  
</body>  
</html>  

获取鼠标的位置/坐标

热门文章

最新文章

相关电子书