offsetX/Y与clientX/Y的小区别

我心飞翔 分类:javascript

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
    }
}
 

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

1.png
我们可发现,无论鼠标如何移动位置,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")
     }
}
 

以上代码截图如下

2.png

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

回复

我来回复
  • 暂无回复内容