div calling two different functions

Question

I have two different divs that they call different functions when you click on them. The div that has the class="msg1" calls a function called message1() that brings one alert saying('this is message 1'). This is working well

My problem is that I have another div called class="msg2" that it is inside of the the div class="msg1" and when I click on this div class="msg2" it calls the function message2() AND ALSO the function message1(), which I don't want.

When I click on the div class="msg2" I JUST want to call the function message2(). How can I just execute the function message2() when I click on the div class=msg2?

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>

score 1 · Accepted Answer · answered Sep 19 '20 at 22:16

You can stop the propagation of the event from the child div using event.stopPropagation()

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 calling two different functions

1 Answers1