这是一个更通用的解决方案，它允许监视多个元素，并动态地从队列中添加和删除元素。

它保存一个全局队列（autoCloseQueue）——一个对象容器，用于在外部单击时应关闭的元素。

每个队列对象键都应该是DOM元素id，值应该是一个具有2个回调函数的对象：

 {onPress: someCallbackFunction, onOutsidePress: anotherCallbackFunction}

将其放入文档就绪回调中：

window.autoCloseQueue = {}  

$(document).click(function(event) {
    for (id in autoCloseQueue){
        var element = autoCloseQueue[id];
        if ( ($(e.target).parents('#' + id).length) > 0) { // This is a click on the element (or its child element)
            console.log('This is a click on an element (or its child element) with  id: ' + id);
            if (typeof element.onPress == 'function') element.onPress(event, id);
        } else { //This is a click outside the element
            console.log('This is a click outside the element with id: ' + id);
            if (typeof element.onOutsidePress == 'function') element.onOutsidePress(event, id); //call the outside callback
            delete autoCloseQueue[id]; //remove the element from the queue
        }
    }
});

然后，当创建id为“menuscontainer”的DOM元素时，只需将此对象添加到队列：

window.autoCloseQueue['menuscontainer'] = {onOutsidePress: clickOutsideThisElement}

现在有一个插件：外部事件（博客文章）

当clickoutside处理程序（WLOG）绑定到元素时，会发生以下情况：

元素被添加到一个数组中，该数组包含所有具有clickoutside处理程序的元素（名称空间）单击处理程序绑定到文档（如果尚未存在）在文档中的任何单击时，都会为该数组中不等于或不是单击事件目标的父级的元素触发单击外部事件此外，clickoutside事件的event.target设置为用户单击的元素（因此您甚至可以知道用户单击了什么，而不仅仅是他在外面单击了什么）

因此，不会阻止任何事件的传播，并且可以在元素的“上方”使用额外的单击处理程序和外部处理程序。

我已经使用了下面的脚本并完成了jQuery。

jQuery(document).click(function(e) {
    var target = e.target; //target div recorded
    if (!jQuery(target).is('#tobehide') ) {
        jQuery(this).fadeOut(); //if the click element is not the above id will hide
    }
})

下面是HTML代码

<div class="main-container">
<div> Hello I am the title</div>
<div class="tobehide">I will hide when you click outside of me</div>
</div>

你可以在这里阅读教程

检查窗口单击事件目标（它应该传播到窗口，只要它没有在其他地方被捕获），并确保它不是任何菜单元素。如果不是，那么你就在菜单之外。

或者检查单击的位置，看看它是否包含在菜单区域中。

$(document).click(function() {
    $(".overlay-window").hide();
});
$(".overlay-window").click(function() {
    return false;
});

如果单击文档，则隐藏给定元素，除非单击同一元素。

我不认为你真正需要的是当用户在外面点击时关闭菜单；您需要的是当用户单击页面上的任何位置时关闭菜单。如果你点击菜单，或者离开菜单，它应该会关闭吗？

发现上面没有令人满意的答案，促使我前几天写了这篇博文。对于更迂腐的人，有很多陷阱需要注意：

如果在单击时将单击事件处理程序附加到body元素，请确保在关闭菜单并解除事件绑定之前等待第二次单击。否则，打开菜单的单击事件将弹出到必须关闭菜单的侦听器。若在单击事件上使用event.stopProposition（），则页面中的其他元素都不能在任何位置单击以关闭功能。无限期地将click事件处理程序附加到body元素不是一个高性能的解决方案将事件的目标及其父级与处理程序的创建者进行比较时，假设您想要的是在单击关闭菜单时关闭菜单，而真正想要的是当您单击页面上的任何位置时关闭菜单。监听body元素上的事件会使代码更加脆弱。像这样无辜的风格会破坏它：body｛margin-left:auto；margin-right:auto；width:960px；｝