div调用两个不同的函数[重复]答案

【问题标题】：div calling two different functions [duplicate]div调用两个不同的函数[重复]
【发布时间】：2021-01-06 11:02:00
【问题描述】：

我有两个不同的 div，当您单击它们时它们会调用不同的函数。具有 class="msg1" 的 div 调用一个名为 message1() 的函数，该函数会发出一个警告说（'这是消息 1'）。这很好用

我的问题是我有另一个名为 class="msg2" 的 div，它位于 div class="msg1" 的内部当我点击这个 div class="msg2" 时，它会调用函数 message2() 以及我不想要的函数 message1()。

当我点击 div class="msg2" 我只想调用函数 message2()。当我点击 div class=msg2 时如何执行函数 message2()？

const message1 = () => {
  alert('this is message 1')
}

const message2 = () => {
  alert('this is message 2')
}

.msg1 {
  width: 600px;
  height: 600px;
  background-color: darkgoldenrod;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg2 {
  width: 300px;
  height: 300px;
  background-color: dimgrey;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="msg1" onclick="message1()">
  <div class="msg2" onclick="message2()">
  </div>
</div>

【问题讨论】：

标签： javascript html css events onclick

【解决方案1】：

您可以使用event.stopPropagation() 停止从子div 传播事件

const message1 = (event) => {
  alert('this is message 1')
}

const message2 = (event) => {
  alert('this is message 2');
  event.stopPropagation();
}

.msg1 {
  width: 600px;
  height: 600px;
  background-color: darkgoldenrod;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg2 {
  width: 300px;
  height: 300px;
  background-color: dimgrey;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="msg1" onclick="message1(event)">
  <div class="msg2" onclick="message2(event)">
  </div>
</div>

【讨论】：