HTML嵌套盒子点击事件问题：点击子盒子仅显示自身文本

嘿，这个问题我之前也碰到过！核心原因是事件冒泡（Event Bubbling）在搞怪——当你点击内部的蓝色B盒子时，点击事件会顺着DOM树向上传播，触发父级红色A盒子的点击事件。而父级元素的innerText会包含所有子元素的文本内容，所以最终弹出了"AB"而不是你想要的"B"。

下面给你两个简单好使的解决方案：

方案1：用event.target定位实际点击的元素 #

修改你的JS代码，把this换成event.target，这样就能精准拿到真正被点击的那个元素，而不是冒泡到的父元素：

var box = document.querySelectorAll("div"); 
box.forEach(function(element) { 
  element.onclick = function(event) { // 别忘了接收event参数
    alert(event.target.innerText.trim()); // trim()去掉文本前后的空格，确保弹出干净的"B"
  } 
}); 

方案2：阻止事件冒泡 #

在元素的点击事件里阻止事件继续向上传播，这样父元素的点击事件就不会被触发，每个元素只响应自己的点击：

var box = document.querySelectorAll("div"); 
box.forEach(function(element) { 
  element.onclick = function(event) { 
    alert(this.innerText.trim());
    event.stopPropagation(); // 这行代码就能拦住事件往上跑
  } 
}); 

另外你的HTML结构没问题，稍微调整下格式会更易读：

<div style="height: 500px; width: 500px; background: red"> 
  A 
  <div style="height: 200px; width: 200px; background: blue;"> 
    B 
  </div> 
</div>

内容的提问来源于stack exchange，提问作者Haris Long