按下外部 div 时运行内部 div 单击事件，反之亦然

【问题标题】：Run inner div click event when pressing outer div or vice versa按下外部 div 时运行内部 div 单击事件，反之亦然
【发布时间】：2021-03-23 09:19:05
【问题描述】：

是否可以在单击外部 div 时单击内部 div 或在按下内部 div 时单击外部 div。最后，我希望两个 div 在按下任何 div 时都能得到点击

const outer = () => {
  console.log('clicked outer div')
}

const inner = () => {
  console.log('clicked innder div')
}

.outer {
  border: 2px solid red;
  heigth: 50px;
  weigth: 50px;
  margin: 50px 50px;
  padding: 5px;
}

.inner {
  border: 2px solid blue;
  heigth: 50px;
  weigth: 50px;
  margin: 50px 50px;
  padding: 5px;
}

<div class="outer" onClick="outer()">
  Outer Div
  <div class="inner" onClick="inner()">
    Innder Div
  </div>
</div>

【问题讨论】：

为什么不在外层 div 上有一个 onClick？

标签： javascript html onclick click onclicklistener

【解决方案1】：

父元素上的单个事件监听器就足够了。事件冒泡。所以每当inner被点击时，事件就会通过父母，传递outer。在outer 元素中，您可以通过检查Event 对象来检查事件。该对象在每个事件侦听器中自动可用，并会告诉您事件是什么、触发事件的元素等等。

在下面的示例中，我在outer 元素上使用单个事件侦听器，并读取event 对象的target 属性以确定已单击的元素。然后它将元素的class 输出到console.log 字符串中。

const outer = document.querySelector('.outer');

outer.addEventListener('click', event => {
  console.log(`clicked ${event.target.className} div`);
});

.outer {
  border: 2px solid red;
  margin: 50px 50px;
  padding: 5px;
}

.inner {
  border: 2px solid blue;
  margin: 50px 50px;
  padding: 5px;
}

<div class="outer">
  Outer Div
  <div class="inner">
    Inner Div
  </div>
</div>

【讨论】：