理解页面坐标系统：offset、client和page的区别

在前端开发中，了解不同坐标系统对于事件处理和布局调整至关重要。以下是 offset、client 和 page 坐标系统的详细解释及其使用示例。

Offset：

Offset 坐标是相对于当前元素的边界框的距离。它不考虑滚动条的位置，因此无论页面是否滚动，offsetX 和 offsetY 的值始终保持不变。

Client：

Client 坐标是相对于浏览器可视区域（viewport）的距离。同样地，它也不受滚动条的影响。clientX 和 clientY 提供的是相对于视口左上角的坐标。

Page：

Page 坐标是相对于整个文档的距离。这意味着当页面滚动时，pageX 和 pageY 的值会随着滚动条的变化而变化，反映了点击点在整个文档中的绝对位置。

以下是一个简单的 HTML 示例，展示了如何使用这些坐标属性：

对应的 Javascript 代码用于捕获并显示点击事件中的坐标信息：

(function() {
    function objClick(targetId) {
        document.getElementById(targetId).Onclick= function(e) {
            console.log("Offset: X=" + e.offsetX + ", Y=" + e.offsetY);
            console.log("Client: X=" + e.clientX + ", Y=" + e.clientY);
            console.log("Page: X=" + e.pageX + ", Y=" + e.pageY);
            console.log("");
        };
    }
    objClick("div1");
    objClick("div2");
})();