详细区分DOM事件中鼠标指针的坐标问题
前面博客中我们讲解到了DOM事件的event对象，里边包含了鼠标事件的指针坐标属性。比如event.offsetX,event.clientX,event.pageX,event.screenX等等。现在我们来解析一下这些坐标属性的区别。
HTML代码：
<divclass="box"></div><divclass="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/
