offset案例:获取鼠标在盒子内的坐标

103 阅读1分钟
<!DOCTYPE HTML>
<html>
 <head>
  <title>案例:获取鼠标在盒子内的坐标</title>
  <meta charset="utf-8" />
  <style>
   * {
    margin: 0;
    padding: 0;
    }
   #box {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin-left: 100px;
    margin-top: 100px;
    }
  </style>
 </head>
 <body>
  <div id="box"> </div>
  <script>
   var box = document.getElementById('box');
   document.addEventListener('click', function(e) {
    var x1 = e.pageX;
    var y1 = e.pageY;
   //console.log(x1 + ',' + y1);
    var x2 = box.offsetLeft;
    var y2 = box.offsetTop;
   //console.log(x2 + ',' + y2);
    var x = x1 - x2;
    var y = y1 - y2;
   console.log(x + ',' + y);
   })

  </script>
 </body>
</html>