javascript - 仅在使用 Javascript(Jquery) 单击背景时退出 Div [对于弹出窗口]

Question

我有点尴尬。我目前有一个弹出窗口，我希望在单击背景或单击“ex out”按钮时关闭弹出窗口。问题是，单击主框时它将关闭弹出窗口。这是我的 HTML:

<div id="newcommentcontainer">
    <div id="newcommentholder" class="col-xs-12 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3">
        <form method="post" class="col-xs-12">
            <div id="exoutnewcommentholder" class="col-xs-12">
                <span class="glyphicon glyphicon-remove" id="exoutnewcomment"></span>
            </div>
            <div id="newcommenttitle" class="col-xs-12"> Add New Comment </div>
            <textarea id="commentinput" name="commentinput" class="col-xs-12 col-sm-8 col-sm-offset-2" placeholder="Type your Comment here."></textarea>
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3">
                <button id="createcommentbutton" class="col-xs-12" input type="submit" value="addcomment">Add Comment</button>
            </div>
            <div id="commentcharactercount" class="col-xs-12"> 0 / 500 Characters. </div>
            <input type="text" id="commentlengthholder" name="commentlengthholder" style="display:none">
        </form>
    </div>
</div>

所以基本上，当点击#newcommentcontainer (First Div) 时，整个事情都会关闭。如果单击 #newcommentholder，则不会发生任何事情，因为它保存着信息。然而，如果 #exoutnewcommentholder 被点击，整个事情也会关闭。

简单地说，我希望整个东西在被点击时显示:无，除非它是在#newcommentholder 中被点击的(不包括ex out 按钮)。

我已经开始使用这个 JQuery:

    $("#newcommentcontainer").click(function(e) {
        $("#newcommentcontainer").css("display","none");
    });

但我不确定如何从这里继续。请帮忙! :)

Answer 1

您可以使用 2 个点击处理程序，第二个将阻止从 newcommentholder 传播点击事件，以便在内部点击不会关闭弹出窗口

$("#newcommentcontainer, #exoutnewcommentholder").click(function (e) {
    $("#newcommentcontainer").hide();
});
$('#newcommentholder').click(function (e) {
    //stop propagation to newcommentcontainer element
    e.stopPropagation();
})

---

您可以尝试的另一个选项是(未测试)检查目标元素是否在 newcommentholder 之内，例如

$("#newcommentcontainer").click(function (e) {
    var $target = $(e.target);
    if ($target.closest('#exoutnewcommentholder').length || !$target.closest('#newcommentholder').length) {
        $("#newcommentcontainer").hide();
    }
});