在HTML中，offsetX和offsetY是鼠标事件的属性，它们的坐标是相对于触发事件的目标元素（event.target）的左上角的，而不是父容器。具体来说：
-
参照对象：
当事件（如click、mousemove）触发时，offsetX和offsetY的值是相对于事件目标元素（即触发事件的元素，event.target）的填充区域（padding edge）的坐标。即使事件冒泡到父容器并在此处理，这两个属性依然基于原始触发事件的元素，而非父容器。 -
与父容器的关系：
如果父容器监听了事件，但实际触发事件的元素是其子元素，则offsetX和offsetY的值会相对于子元素的左上角。若需要获取相对于父容器的坐标，需手动计算（例如结合getBoundingClientRect()）。
示例说明：
<div id="parent" style="padding: 20px;">
<div id="child" style="width: 100px; height: 100px;"></div>
</div>
<script>
document.getElementById("parent").addEventListener("click", function(event) {
// 当点击子元素时：
console.log(event.offsetX, event.offsetY); // 相对于子元素的坐标（若子元素是event.target）
console.log(event.target === document.getElementById("child")); // 可能为true
// 若需获取相对于父容器的坐标：
const rect = parent.getBoundingClientRect();
const xRelativeToParent = event.clientX - rect.left;
const yRelativeToParent = event.clientY - rect.top;
});
</script>
替代方案：
clientX/clientY：相对于浏览器视口的坐标。pageX/pageY：相对于整个文档的坐标。- 手动计算父容器相对坐标：结合
getBoundingClientRect()和clientX/clientY。
总结：
offsetX和offsetY的参照物始终是触发事件的元素（event.target），而非父容器。若需父容器的相对坐标，需通过其他方式转换。
