<div id="parent" class="parent-item" onClick="parentFunc()">
  <div id="child" class="child-item" onClick="childFunc()">
  </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%;
}

function parentFunc() {
  alert("親のクリックイベント");
}

function childFunc() {
  alert("子のクリックイベント");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.