javascript - 当一个div在另一个div中时如何获取它

Question

我有两个矩形。较大的是“房子”，它包含较小的“房间”。单击任何一个矩形后，我想通过 div id 获得警报。但是当我点击绿色矩形时，我需要得到“房间”，然后点击红色矩形，然后我需要得到“房子”。这是代码中的 https://jsfiddle.net/pr2501/6a4qwdgx/17/如何让它发挥作用？

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>

和JS:

function reply_click(clicked_id)
  {
      alert(clicked_id);
  }

Answer 1

将单个事件监听器添加到 #house，并从事件目标 (e.target) 获取 id:

document.querySelector('#house')
  .addEventListener('click', e => {
    console.log(e.target.id);
  });

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

如果你想使用内联函数，只在外层div上设置它，并将event作为参数传递:

function reply_click(e) {
  console.log(e.target.id)
}

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