在这样的场景中，我希望能够通过顶部 div 单击背景 div（红色），同时仍然能够单击顶部 div 的子级（蓝色和绿色）。
function bgclick() {
console.log('Background Is Clicked!');
}
function topclick() {
console.log('Top Is Clicked!');
}#background {
background-color: #f33;
width: 250px;
height: 250px;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
#top {
width: 250px;
height: 250px;
position: fixed;
top: 0;
left: 0;
}
.children {
width: 50px;
height: 50px;
position: relative;
}<div id="background" onclick="bgclick()"></div>
<div id="top">
<div class="children" onclick="topclick()" style="background-color:#3f3"></div>
<div class="children" onclick="topclick()" style="background-color:#33f"></div>
</div>我玩过pointer-events: none。这只会使一个可点击，而另一个则不可点击。我怎样才能做到这样我可以点击红色的并收到一条消息，以及蓝色和绿色的消息？