jQuery .on ('click' ) 使用绝对位置时出现问题

Question

我正在尝试创建一个带有深色背景的弹出元素的网站，然后，当您单击背景时，它会逐渐消失。目前我基本上可以正常工作但是当点击在弹出窗口时，不仅仅是背景，它仍然会消失。

我该如何解决这个问题？ JsFiddle

我要修复的 HTML 部分:

<div class="popup-container" data-reference="sign-in">
    <div class="sign-in">
        <h1>Sign In</h1>
        <div class="popup-content-container">
        <form class="sign-in" method="post" action="./action.php">
            <input type="text" name="username" placeholder="Username" /><br />
            <input type="password" name="password" placeholder="Password" /><br />
            <input type="submit" value="Sign In" /><br />
        </form>
        <div class="footer">
            <a href="#">Forgotten Username?</a> <a href="#">Forgotten Username?</a><br />
            <a href="#">Don't Have an Account?</a>
        </div>
    </div>
    </div>
</div>

当前的 jQuery:

$('div.popup-container').on('click', function() {
    $(this).fadeOut();
});

HTML 部分的当前 CSS:

div.popup-container {
    position:absolute;
    margin:auto auto;
    top:0;bottom:0;
    left:0;right:0;
    background:rgba(0,0,0,0.5);

    z-index:101;
}
    div.popup-container:hover {
        cursor:pointer;
    }
/*----  Sign In ----*/
div.sign-in {
    width:400px;
    height:300px;
    position:absolute;
    margin:auto auto;
    top:0;bottom:0;
    left:0;right:0;
    background:#FFF;
    border:solid 1px #CCC;
    border-radius:5px;

    z-index:111;
}
    div.sign-in:hover {
        cursor:default;
    }
    div.sign-in > h1 {
        display:block;
        padding:15px 0;
        border-bottom:solid 1px #CCC;
        text-align:center;
    }
    div.sign-in > div.popup-content-container {
        height:calc(100% - 98px);
        position:relative;
        padding:15px;
    }
    div.sign-in > div.popup-content-container > form.sign-in {
        height:calc(102px + 34px);
        position:absolute;
        margin:auto auto;
        top:0;bottom:0;
        left:0;right:0;
        text-align:center;
    }
        div.sign-in > div.popup-content-container > form.sign-in > input[type=text],
        div.sign-in > div.popup-content-container > form.sign-in > input[type=password],
        div.sign-in > div.popup-content-container > form.sign-in > input[type=submit] {
            width:75%;
            margin-bottom:5px;
            padding:5px;
            background:#FFF;
            border:solid 1px #CCC;
            border-radius:5px;

            outline:none;   
        }
        div.sign-in > div.popup-content-container > form.sign-in > input[type=submit]:hover {
            background:rgba(0,0,0,0.05);
        }
        div.sign-in > div.popup-content-container > div.footer {
            position:absolute;
            margin:auto auto;
            top:auto;bottom:15px;
            left:0;right:0;
            color:rgba(0,0,0,0.5);
            text-align:center;
        }

tl;dr:为什么我的 .on('click') 在弹出窗口内部和外部触发？

Answer 1

解决方案可能是:

$('div.popup-container').on('click', function() {
    $(this).fadeOut();
});

$('div.sign-in').on('click', function(e) {
    e.stopPropagation();
});

这将阻止子元素自动触发附加到父(弹出容器)元素的任何点击事件。

关于 event.stopPropagation() 的更多信息 here .

jsFiddle here.