JS鼠标点击事件触发错误元素，子div坐标获取异常求助

看起来你混淆了几个关键点：事件绑定的目标、不同坐标属性的含义，还有你提到的“事件继承”其实应该是事件冒泡（Event Bubbling）。我来一步步帮你理清：

一、先确认事件是否真的绑定在子元素上 #

有时候我们可能不小心把事件绑到了父容器上，或者因为选择器写错导致绑定对象不对。你可以在事件处理函数里先打印一下evt.currentTarget——这个属性永远指向绑定事件的元素，如果它是你的子div，那绑定是没问题的；如果是父容器，那你得检查绑定代码是不是写错了。

二、关于坐标：你要的是“相对于子元素自身”的位置，而不是视口坐标 #

evt.clientX和evt.clientY是相对于浏览器视口左上角的坐标，和父/子元素的位置无关。如果你想获取点击位置在子元素自身内部的坐标，有两种简单方法：

方法1：直接用offsetX和offsetY #

这两个属性就是专门用来获取点击位置相对于触发事件的元素（也就是你的子div）左上角的坐标，直接用就行：

childDiv.addEventListener('click', (evt) => {
  console.log("相对于子元素的X坐标：", evt.offsetX);
  console.log("相对于子元素的Y坐标：", evt.offsetY);
});

方法2：用getBoundingClientRect()计算 #

如果某些场景下offsetX/Y不生效（比如子元素有嵌套元素），可以通过子元素的位置来计算：

childDiv.addEventListener('click', (evt) => {
  // 获取子元素在视口中的位置信息
  const childRect = evt.currentTarget.getBoundingClientRect();
  // 用视口坐标减去子元素的左上角坐标，得到相对位置
  const relativeX = evt.clientX - childRect.left;
  const relativeY = evt.clientY - childRect.top;
  console.log("相对子元素坐标：", relativeX, relativeY);
});

三、关于你提到的“事件继承”——事件冒泡的说明 #

当你点击子元素时，事件会从子元素开始，向上冒泡到父元素、祖父元素，直到document。这不是“继承”，而是浏览器的事件传播机制。如果父元素也绑定了点击事件，就会被触发。

如果你想阻止事件冒泡（不让父元素的事件触发），可以在子元素的事件处理函数里加一句：

evt.stopPropagation();

示例完整代码 #

假设你的HTML结构是这样的：

<div class="parent">
  <div class="child"></div>
</div>

对应的CSS：

.parent {
  width: 300px;
  height: 300px;
  background: #eee;
  padding: 20px;
  margin: 50px;
}
.child {
  width: 100px;
  height: 100px;
  background: #ff4444;
}

JS代码：

const child = document.querySelector('.child');
child.addEventListener('click', (evt) => {
  // 阻止事件冒泡（如果需要的话）
  evt.stopPropagation();
  
  // 获取相对于子元素的坐标
  console.log("offsetX/Y:", evt.offsetX, evt.offsetY);
  
  // 用getBoundingClientRect计算的方式
  const rect = evt.currentTarget.getBoundingClientRect();
  const relX = evt.clientX - rect.left;
  const relY = evt.clientY - rect.top;
  console.log("计算得到的相对坐标:", relX, relY);
  
  // 确认绑定的元素是子元素
  console.log("绑定事件的元素:", evt.currentTarget);
});

内容的提问来源于stack exchange，提问作者The Truth