对于iPad和iPhone等触摸设备，我们可以使用以下代码：

$(document).on('touchstart', function (event) {
    var container = $("YOUR CONTAINER SELECTOR");

    if (!container.is(e.target) &&            // If the target of the click isn't the container...
        container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

要做到这一点，最广泛的方法是选择网页上的所有内容，除了不希望检测到点击的元素，并在打开菜单时绑定点击事件。

然后，当菜单关闭时，移除绑定。

使用.stopPropagation可防止事件影响菜单容器的任何部分。

$("*").not($("#menuscontainer")).bind("click.OutsideMenus", function ()
{
    // hide the menus

    //then remove all of the handlers
    $("*").unbind(".OutsideMenus");
});

$("#menuscontainer").bind("click.OutsideMenus", function (event) 
{
    event.stopPropagation(); 
});

使用流中断、模糊/聚焦事件或任何其他棘手的技术，只需将事件流与元素的亲属关系匹配即可：

$(document).on("click.menu-outside", function(event){
    // Test if target and it's parent aren't #menuscontainer
    // That means the click event occur on other branch of document tree
    if(!$(event.target).parents().andSelf().is("#menuscontainer")){
        // Click outisde #menuscontainer
        // Hide the menus (but test if menus aren't already hidden)
    }
});

要删除事件侦听器外部的单击，只需执行以下操作：

$(document).off("click.menu-outside");

我们实现了一个解决方案，部分基于上面用户的评论，这非常适合我们。我们使用它来隐藏搜索框/结果，当在这些元素之外单击时，不包括最初的元素。

// HIDE SEARCH BOX IF CLICKING OUTSIDE
$(document).click(function(event){ 
    // IF NOT CLICKING THE SEARCH BOX OR ITS CONTENTS OR SEARCH ICON 
    if ($("#search-holder").is(":visible") && !$(event.target).is("#search-holder *, #search")) {
        $("#search-holder").fadeOut('fast');
        $("#search").removeClass('active');
    }
});

它首先检查搜索框是否已经可见，在我们的例子中，它还删除了隐藏/显示搜索按钮上的活动类。

投票选出最受欢迎的答案，但添加

&& (e.target != $('html').get(0)) // ignore the scrollbar

因此，单击滚动条不会隐藏目标元素。

要隐藏文件TreeClass（如果在其外部单击），请执行以下操作：

jQuery(document).mouseup(function (e) {
    var container = $(".fileTreeClass");
    if (!container.is(e.target) && // If the target of the click isn't the container...
         container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});