CodePen Embed - stopPropagation()

<div id="parent" class="parent-item">
  <div id="child" class="child-item">
  </div>
</div>

.parent-item {
  background-color: red;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.child-item {
  background-color: blue;
  width: 50%;
  height: 50%;
}

document.getElementById("parent").onclick = function(event) {
  alert("親のクリックイベント");
}

document.getElementById("child").onclick = function(event) {
  alert("子のクリックイベント");
  event.stopPropagation();
}

This Pen is owned by freelance-jak on CodePen.

See more by @freelance-jak on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.