一、测试代码如下

  1. <!DOCTYPE HTML>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Javascript</title>
  6.     <style>
  7.       body{margin:0;padding:0;background:#ccc;font-size:12px;overflow:auto}
  8.       .main{width: 500px;height: 330px;position: relative;margin: 250px auto 0;background-color: #eee;}
  9.       .box{position: absolute;width: 220px;height: 180px;background-color: orange;top: 80px;left: 80px;}
  10.     </style>
  11.   </head>
  13.   <body style="height:1600px;">
  14.     <div class="main">
  15.       <div class="box" id="box"></div>
  16.     </div>
  17.     <script>
  18.       var oBox = document.getElementById('box');
  20.       window.onload = function(){
  22.         oBox.onmousedown = function(ev){
  23.           ev = ev || window.event;
  25.           console.log(ev.offsetX, ev.offsetY);
  26.           console.log(ev.clientX, ev.clientY);
  27.           console.log(ev.pageX, ev.pageY);
  28.           console.log(ev.screenX, ev.screenY);
  29.           console.log(ev.layerX, ev.layerY);
  30.           console.log(ev.x, ev.y);
  31.         }
  32.       }
  33.     </script>
  34.   </body>
  35. </html>

二、图解 event.offsetX，event.clientX，event.pageX，event.screenX属性

20150502094344891.jpg

  • offsetX：指事件发生位置相对触发元素左上角的水平坐标；
  • clientX：指事件发生位置相对可视区域的水平坐标(只是document展现的部分，不包括搜索栏、书签栏等)；
  • screenX：指事件发生位置相对电脑屏幕的水平坐标；
  • pageX：指事件发生位置相对文档(document)的水平坐标(是指整个文档，当出现滚动条时，隐藏的部分也会被算入pageX)；

三、图解 event.layerX，event.layerY 属性

20150502134126249.jpg

  • layerX： FF(FireFox)特有，鼠标相比较于当前坐标系的位置，即从当前容器依次往上寻找设置绝对定位或相对定位的元素为参考坐标系，以该容器的左上角来计算水平坐标；

四、图解 event.x，event.y 属性

20150502140010681.jpg

  • 在Chrome中 x 等同于clientX 。

参考链接