获取鼠标在盒子中的坐标

1、在盒子内点击，想要得到鼠标距离盒子左右的距离

想到鼠标事件，但是

并不是对于盒子而言的

2、首先得到鼠标在页面中的坐标（pageX、pageY）

3、其次得到盒子在页面中的距离

4、距离一减，就能得到相对于盒子的距离

    <div></div>
    <script>
        //给div盒子添加点击事件
        var div = document.querySelector('div')
        div.addEventListener('click', function(e) {
            //获得鼠标的位置
            var b = e.pageX;
            var a = e.pageY;
            //获得div的距离
            var c = div.offsetLeft;
            var d = div.offsetTop;
            //计算鼠标的坐标
            var x = b - c;
            var y = a - d;
            alert(x)
            alert(y)
            this.innerHTML = 'x坐标是' + x + 'y坐标是' + y
        })
    </script>


    <style>
        div {
            width: 200px;
            height: 200px;
            margin-top: 100px;
            margin-left: 200px;
            background-color: pink;
        }
    </style>

5、如果想要移动一下鼠标，就要获得最新的坐标，使用鼠标移动事件mousemove