求鼠标在一个盒子内的坐标

具体的思路是：
1.得到鼠标所在的位置通过e.clientX,e.clientY来获得

得到当前盒子距离浏览器左边的距离，可以通过offsetLeft，offsetTop来获取，但是必须注意的是offsetLeft,offsetTop是相对于父级元素（这个父级元素具有定位属性）而言的，如果父级元素没有定位就一直网上找，直到找到具有定位的父级元素，如果多个父级元素同时有定位，那么将每一个得到的offsetLeft相加就会得到到浏览器的距离
用鼠标的位置 - 盒子到浏览器边缘的距离就会得到鼠标在盒子内的距离，

example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>求鼠标在盒子内的坐标</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0; 
        }
        .box{
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
        }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script type="text/javascript">
        var div = document.getElementsByTagName("div")[0]
        div.onclick = function (e) {
            var event = e || window.event
            var x = event.clientX - this.offsetLeft
            var y = event.clientY -this.offsetTop
            this.innerHTML = 'x=' + x + ', y='
        }
    </script>
  </body>
</html>

求鼠标在一个盒子内的坐标

example:

推荐阅读更多精彩内容