如何获取点击位置相对于父div元素的偏移量？

嘿，我太懂你的困扰了——之前用offsetX/offsetY拿到的总是相对于点击的子元素（比如那个span）的偏移，完全不是你想要的父div视角。其实只要换个思路，结合视口坐标和父元素的位置计算就行，我给你一步步讲明白：

问题根源 #

你之前用到的e.offsetX/e.offsetY，本质是**相对于触发事件的元素（也就是你点的那个span）**的偏移量，自然不符合需求。我们要的是相对于父div的坐标，得换一组属性来计算。

解决方案：视口坐标 + 父元素位置 #

核心逻辑很简单：

1. 用e.clientX/e.clientY获取点击位置相对于浏览器视口的坐标
2. 用getBoundingClientRect()拿到父元素相对于视口的位置（left、top等参数）
3. 用点击的视口坐标减去父元素的视口坐标，得到的就是相对于父元素的偏移量

给你个完整的代码示例，直接就能用：

HTML结构

<div id="parent-box" style="position: relative; width: 400px; height: 300px; border: 2px solid #333; padding: 20px; background: #f5f5f5;">
  <span>点我试试～</span>
  <p>再点这里看看效果</p>
</div>

JavaScript代码

const parentDiv = document.getElementById('parent-box');

// 给父元素绑定点击事件（利用事件冒泡，子元素的点击会自动触发这里）
parentDiv.addEventListener('click', (event) => {
  // 获取父元素在当前视口中的位置信息
  const parentRect = parentDiv.getBoundingClientRect();
  
  // 计算相对于父元素的偏移量
  const relativeX = event.clientX - parentRect.left;
  const relativeY = event.clientY - parentRect.top;
  
  console.log(`相对于父div的偏移：X = ${Math.round(relativeX)}px，Y = ${Math.round(relativeY)}px`);
});

额外小提示 #

• 不管你点击父元素内的哪个子元素（span、p甚至更深的嵌套元素），只要事件能冒泡到父元素，这个计算就有效
• getBoundingClientRect()会自动处理页面滚动的影响，不用额外加scrollX/scrollY来修正
• 如果需要相对于父元素的内容区域（排除边框和内边距），可以再减去父元素的paddingLeft和paddingTop

内容的提问来源于stack exchange，提问作者Oskar Martin