案列分析：
- 我们在盒子内点击， 想要得到鼠标距离盒子左右的距离。
- 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY）
- 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
- 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标
案例代码：
<style>
.box {
margin: 200px auto;
width: 400px;
height: 400px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box')
box.addEventListener('mousemove', function(e) {
//获取鼠标在页面中的坐标
// console.log(e.pageX);
var x = e.pageX - this.offsetLeft
var y = e.pageY - this.offsetTop
box.innerHTML = `当前x坐标为${x},y坐标为${y}`
})
</script>
</body>
- 快来动手试一试吧！~
