今天给朋友们分享js获取鼠标坐标的最全方法集合：

​HTML、CSS与JS代码如下：​

<!DOCTYPE HTML>  
<html lang="zh-cn">  
<head>  
<meta charset="utf-8" />  
<title>Javascript</title>  
<style>  
body{margin:0;padding:0;background:#ccc;font-size:12px;overflow:auto}  
.main{width: 500px;height: 330px;position: relative;margin: 250px auto 0;background-color: #eee;}  
.box{position: absolute;width: 220px;height: 180px;background-color: orange;top: 80px;left: 80px;}  
</style>  
</head>  
  
<body style="height:1600px;">  
<div class="main">  
    <div class="box" id="box"></div>  
</div>  
  
<script>  
var oBox = document.getElementById('box');  
window.onload = function(){  
    oBox.onmousedown = function(ev){  
        ev = ev || window.event;           
        console.log(ev.offsetX, ev.offsetY);  
        console.log(ev.clientX, ev.clientY);  
        console.log(ev.pageX, ev.pageY);  
        console.log(ev.screenX, ev.screenY);  
        console.log(ev.layerX, ev.layerY);  
        console.log(ev.x, ev.y);  
    }  
}   
</script>  
</body>  
</html>

​浏览器对这些属性的支持情况：​

最全的获取鼠标坐标的方法_最全的获取鼠标坐标的方法


event.pageX与event.pageY有兼容问题，IE9之前不支持使用，如果IE9之前浏览器要获取光标在文档中的坐标，则使用 光标在视口中的坐标 + 滚动距离
event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)


​它们对应获取的距离是哪里：​

最全的获取鼠标坐标的方法_获取鼠标坐标方法的兼容性_02

​event.layerX,event.layerY:​

最全的获取鼠标坐标的方法_获取鼠标方法的图解_03

​event.x,event.y:​

最全的获取鼠标坐标的方法_获取鼠标坐标的方法的区别_04