<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();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.