<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 doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.