我正在尝试创建一个覆盖层，其中有一个外部 div（半透明），并且位于较小的内部内容 div 之上。单击外部区域会使覆盖层消失。单击内容区域应与覆盖内容进行交互。
查看我的示例代码，单击红色区域首先会引发“红色”警报，然后引发“黑色”警报，从而在第一次交互后立即关闭叠加层。
如何防止点击上面的红色div时触发底层黑色div的onclick事件？
<div onclick = "window.alert('black')" style = "background-color:black; width:100%; height:100%">
<div onclick = "window.alert('red')" style = "background-color:red; position: absolute; top:10%; left:10%; width: 80%; height: 80%;">
some content
</div>
</div>我在网上找不到任何与此相关的信息，除了人们设置的pointer-events将none禁止用户与覆盖内容交互之外。设置不同也z-indeices不起作用。
如果您想验证点击发生情况： https: //onlinegdb.com/rJbOmB0FV