javascript - 如果点击目标不是它本身或其使用 jQuery 的子元素，则隐藏元素

Question

我在使用 jQuery 显示和隐藏菜单时遇到了一些问题。我想做的是:

如果按下按钮，则显示菜单 div。如果点击div以外的地方，隐藏菜单div。

这就是我的问题所在。上面的工作非常完美，但是当您单击 div 内部的元素时，菜单会隐藏，这不是我想要的结果。我的代码如下:

$(document).ready(function() {
    $(document).click(function(e) {
        if (e.target.id != "projectEdit") {
            if (e.target.id != "projectEditMenu") {
                $("#projectEditMenu").hide();
            }
        } else {
            $("#projectEditMenu").show();
        }
    });
});

如果菜单 div 的子项被排除在该参数之外，我该如何做到这一点，如果单击子项，它会保持菜单打开？

HTML代码:

    <div id="projectEditMenu">

        <div id="projectEditMenuMarker"></div>

        <div id="projectEditMenuAddTile">

            <span id="projectEditMenuAddTileTitle">Add Tile</span>

            <form id="newTileForm" action="openProject.php" method="put" hidden></form>

            <input form="newTileForm" type="text" name="newTileName" id="newTileNameInput" placeholder="Tile Name">

        </div>

    </div>

Answer 1

您可以使用 closest()，它将包括作为参数传递的选择器的后代和元素本身

示例:

$(document).click(function (e) {
     var $tgt = $(e.target);
    if ($tgt.closest("#projectEdit").length) {
        alert('I am part of "#projectEdit"');
    }   

});

closest() API Docs