防止底层div onclick事件触发

Question

我正在尝试创建一个具有外部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