Javascript 当一个div位于另一个div内时，如何获取该div id

我有两个矩形。大的是“房子”，小的是“房间”。 我想在单击任何一个矩形后，使用div id获得警报。但当我点击绿色矩形时，我需要得到“房间”，点击红色则需要得到“房子”。下面是代码在 如何让它工作

Html:

<div id="house"  onClick="reply_click(this.id)"   style="border: 2px solid red; height:50px;width:50px;padding:15px;">        
        <div id="room"  onClick="reply_click(this.id)"  style="border: 2px solid green; height:25px;width:25px;">           
        </div>
    </div>

---

将单个事件侦听器添加到

#house

，并从事件的目标（

e.target

）获取

id

）：

document.querySelector（“#house”）
.addEventListener（'click'，e=>{
console.log（e.target.id）；
});
将单个事件侦听器添加到
#house
，并从事件的目标（
e.target
）获取
id
）：


document.querySelector（“#house”）
.addEventListener（'click'，e=>{
console.log（e.target.id）；
});
绿色矩形也在红色矩形内。因此，当您在内部矩形中单击时，外部矩形也会侦听事件。因此，您需要停止事件传播

  function reply_click(clicked_id)
  {
      alert(clicked_id);
      event.stopPropagation();
  }

绿色矩形也在红色矩形内。因此，当您在内部矩形中单击时，外部矩形也会侦听事件。因此，您需要停止事件传播

  function reply_click(clicked_id)
  {
      alert(clicked_id);
      event.stopPropagation();
  }

我明白了，我必须澄清，所有的id都是未知的。在这种情况下如何继续？因为需要将其添加到containing
div
，所以应该知道
id
。但是，如果您不知道
id
，可以将其内联。请参阅更新的答案。我发现我必须澄清，所有id都是未知的。在这种情况下如何继续？因为需要将其添加到containing
div
，所以应该知道
id
。但是，如果您不知道
id
，可以将其内联。请参阅更新的答案。