javascript - Onclick 位置细节

Question

我需要 JAVASCRIPT/CSS/HTML 方面的帮助。我为表单创建了一个小对话框，如下所示:

#greyout{
background-image:url('../res/greyout.png');
display:none;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:10;
}
.forms{

width:20%;
position:absolute;
top:20%;
left:40%;
right:40%;
display:none;
height:30%;
border: 1px solid black;
background-color:white;
color:black;
text-align:center;
}

表单 div 在 HTML 的灰色输出 div 中。此外，我有一个触发此功能的按钮:

function login()
{
    document.getElementById("greyout").style.display="block";
    document.getElementById("loginForm").style.display="block";
}
function signup()
{
    document.getElementById("greyout").style.display="block";
    document.getElementById("signupForm").style.display="block";
}

我想确保当我按下变灰的背景时，分类为“表单”的对话框将消失，页面也会变灰。尝试为 greyout div 创建一个 onclick 事件，即使在对话框本身上也如此按下，它会触发。我只需要在用户在后台按下时收听。提前致谢。

Answer 1

这是可以预料的，因为事件会在 DOM 树中向上冒泡。尝试监听外部和内部 div 上的 onclick，如果单击内部 div，则返回 false 以取消事件冒泡并保持外部 div 的当前监听器。