创建仅在 div 之外工作的链接

Question

我有以下代码：

<div class="popup">
<div>
Some content
</div>
</div>
Some background html for the entire page

使用以下 CSS：

div.popup
{
z-index:999;
display:block;
position:absolute;
top:0px;
left:0px;
background-color: rgba(0,0,0,0.5);
width:100vw;
height:100vh;
box-shadow: 0px 0px 0 200px rgba(0,0,0,0.5);
}
div.popup div
{
background-color: #fff;
margin: 20px;
width: 320px;
height: 200px;
}

我的目标是可以单击外部div 中的任意位置以导航到其他页面。我尝试了用<a href="?" title="cancel">标签封装外部div，并在外部div 部分上尝试了OnClick="alert(test);"，但它们也会在单击内部div 时触发。

我还尝试给内部div 一个 9999 的 z 索引以使其弹出，但这也没有奏效。

我怎样才能做到这一点，以便我可以单击外部div 中的任意位置以转到页面，而如果我单击内部div 就不会发生这种情况？

Answer 1

你需要停止冒泡。该事件将从子项传递到容器(以及body、html等(，并且您的容器处理程序将收到通知。为了防止这种情况，请告诉浏览器在此时停止冒泡，使用event.stopPropagation()：

div.popup
{
z-index:999;
display:block;
position:absolute;
top:0px;
left:0px;
background-color: rgba(0,0,0,0.5);
width:100vw;
height:100vh;
box-shadow: 0px 0px 0 200px rgba(0,0,0,0.5);
}
div.popup div
{
background-color: #fff;
margin: 20px;
width: 320px;
height: 200px;
}

<div class="popup" onclick="alert('will go to another page')">
<div onclick="event.stopPropagation()">
Some content
</div>
</div>
Some background html for the entire page