更新

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

Answer 1

这更多是您遇到的JavaScript行为。

冒泡

冒泡的原理很简单。

事件发生在元素上时，它首先在该元素上运行处理程序，然后在其父元素上运行，然后一直在其他祖先上运行。

使用event.stopPropagation()

定义和用法



stopPropagation()方法可防止调用同一事件的传播。



传播意味着冒泡到父元素或捕获到子元素。

https://www.w3schools.com/jsref/event_stoppropagation.asp

更新

一个简单的函数将更易于处理。

类似这样的东西：

const alert = (text) => {
  event.stopPropagation();
  window.alert(text)
}

<div onclick = "alert('black')" style = "background-color:black; width:100%; height:100%">
    <div  onclick = "alert('red')" style = "background-color:red; position: absolute; top:10%; left:10%; width: 80%; height: 80%;">
        some content
    </div>
</div>

防止底层div onclick事件触发

1 个答案:

冒泡

定义和用法

更新