div 调用两个不同的函数

Question

我有两个不同的 div，当您单击它们时，它们会调用不同的函数。具有 class="msg1" 的 div 调用一个名为 message1() 的函数，该函数带来一个警告语句 ('this is message 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>

Answer 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>

div 调用两个不同的函数

div calling two different functions

html

javascript

css

events

onclick