offsetX/Y与clientX/Y的小区别W3C offsetX/Y上对于offsetX/Y的解释：offsetX/

offsetX/Y,clientX/Y概念

W3C offsetX/Y上对于offsetX/Y的解释：offsetX/Y:发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
W3C clientY上对于clientX/Y的解释：clientX/Y 事件属性返回当事件被触发时鼠标指针向对于***浏览器页面（或客户区）***的水平/垂直坐标。

offsetX/Y,clientX/Y区别

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的（this）对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的（this）对象的 y 坐标。
以上描述摘自网站

代码实例

HTML代码：

<body>
<div class="butterfly" id="butterfly"></div>
</body>

CSS代码：

.butterfly {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: pink;
}

JS代码：

window.onload = function () {
    let fly = document.getElementById("butterfly")
    fly.onmousedown = function () {
        document.onmousemove = function (event) {
            fly.style.top = event.clientY + "px"
            fly.style.left = event.clientX + "px"
            console.log("offsetX" + event.offsetX)
            console.log("offsetY" + event.offsetY)
            console.log("clientX" + event.clientX)
            console.log("clientY" + event.clientY)
            console.log("\n")
        }
    }
    
    //若用fly.onmouseup，当存在多个div时，移动到重叠情况下后释放鼠标div依然会跟随鼠标移动
    document.onmouseup = function () {
        document.onmousemove = null
    }
}

以上代码运行的结果截图如下：

我们可发现，无论鼠标如何移动位置，offsetX/Y值始终为0，这就是因为offsetX/Y值是相对于触发事件对象（代码中的盒子div）的坐标系统，而代码中的div始终跟随鼠标移动，所以这个值始终为0。
我的理解是fly.onmousedown=function()里有一个默认参数event，和document.onmousemove函数的参数event是同一个，所以指代的是同一个事件对象。
将js代码改为如下：

window.onload = function () {
     document.onmousemove = function (event) {
         console.log("offsetX" + event.offsetX)
         console.log("offsetY" + event.offsetY)
         console.log("clientX" + event.clientX)
         console.log("clientY" + event.clientY)
         console.log("\n")
     }
}

以上代码截图如下

我们可以从截图中看到，offsetX/Y始终与clientX/Y相等，因为此时offsetX/Y相较的也是浏览器边缘的距离。