鼠标事件练习：移动鼠标后获取鼠标距离盒子的X轴和Y轴的值

<style>
*{
	margin: 0;
	padding: 0;
}
.box{
	width: 150px;
	height: 150px;
	background-color: greenyellow;
	margin-left: 50px;
	margin-top: 50px;
}
</style>

<div class="box"></div>
<script>
	// 实现效果：鼠标在box盒子内移动，获得鼠标距离盒子的X轴和Y轴的值
	// 第一步：先获取鼠标距离页面的X轴和Y轴的值 pageX 和pageY
	// 第二步：再获取box盒子距离X轴和Y轴的值 offsetTop和offsetLeft
	// 第三步：用获取到的鼠标的X和Y减去box盒子的X和Y 就是鼠标在盒子内的X轴和Y轴的值
	var box = document.querySelector(".box");
	box.addEventListener("mousemove",function(e){
	// 先获取鼠标距离页面的X轴和Y轴的值 pageX 和pageY
	var x = e.pageX;
	var y = e.pageY;
	// 再获取box盒子距离X轴和Y轴的值 offsetTop和offsetLeft
	var top = box.offsetTop;
	var left = box.offsetLeft;
	// 用获取到的鼠标的X和Y减去box盒子的X和Y 就是鼠标在盒子内的X轴和Y轴的值
	var bx = x - top;
	var by = y - left;
	this.innerHTML = "X轴："+bx+",Y轴："+by;
})
</script>