有做过拖拽项目的前端小伙伴一定有遇到过这几个鼠标事件属性：clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY，WTF！一开始SEO禅看到这么多XY也是一头雾水头大的很，读了MDN的文档还是不是很清楚，后面看了几篇文章，又找到一些图片，终于再也不会把他们混在一起了，在这里记录分享给大家：

clientX/Y：当前鼠标点击位置相对于浏览器窗口左上角的X/Y值，不会随着文档滚动而变化
pageX/Y：当前鼠标点击位置相对于文档左上角的X/Y值，如果DOM文档，也就是页面滚动，这个值会变化
screenX/Y：当前鼠标点击位置相对于屏幕浏览器左上角的X/Y值，不会随着浏览器窗口变化或文档滚动而变化
offsetX/Y：当前鼠标点击位置相对于当前被点击DOM对象节点左上角X/Y值，这里注意是padding内边距的左上角

转自：https://www.seozen.top/javascript-clientx_y-pagex_y-screenx_y-offsetx_y.html