详细区分DOM事件中鼠标指针的坐标问题
前面博客中我们讲解到了DOM事件的event对象，里边包含了鼠标事件的指针坐标属性。比如event.offsetX,event.clientX,event.pageX,event.screenX等等。现在我们来解析一下这些坐标属性的区别。
HTML代码：
<div class="box"></div><div class="box2"></div>
CSS代码：
.box{width: 200px;height: 200px;background: red;margin: 200px auto;}.box2{width: 10000px;height: 100px;}body{height: 10000px;}
JavaScript代码：
var oBox=document.getElementsByClassName("box")[0];oBox.onmousemove=function(ev){var ev=ev||window.event;console.log("clientX:"+ev.clientX,"clientY:"+ev.clientY);console.log("screenX:"+ev.screenX,"screenY:"+ev.screenY);console.log("offsetX:"+ev.offsetX,"offsetY:"+ev.offsetY);console.log("pageX:"+ev.pageX,"pageY:"+ev.pageY);}// clientX clientY 相对于可视区域的左上角// screenX screenY 相对于显示器屏幕左上角// offsetX offsetY 相对于触发事件的元素的左上角// pageX PageY 相对于整个网页的左上角 clientX+滚动条
图文解析event.offsetX,event.clientX,event.pageX,event.screenX的区别：
图解event.layerX,event.layerY属性：
图解event.x,event.y属性：
视频讲解链接：
https://www.bilibili.com/video/BV1Cg4y1i7sr/
