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();
});

当前CSS，HTML部分：

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.

Answer 2

在jquery文件中试用此代码：

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

当使用绝对位置时，jQuery .on（'click'）会出现问题

2 个答案: