这里的其他解决方案不适合我，所以我不得不使用：

if(!$(event.target).is('#foo'))
{
    // hide menu
}

编辑：普通Javascript变体（2021-03-31）

我使用这个方法来处理在单击下拉菜单外部时关闭下拉菜单的问题。

首先，我为组件的所有元素创建了一个自定义类名。这个类名将被添加到组成菜单小部件的所有元素中。

const className = `dropdown-${Date.now()}-${Math.random() * 100}`;

我创建了一个函数来检查单击和单击元素的类名。如果clicked元素不包含我上面生成的自定义类名，它应该将show标志设置为false，菜单将关闭。

const onClickOutside = (e) => {
  if (!e.target.className.includes(className)) {
    show = false;
  }
};

然后，我将单击处理程序附加到窗口对象。

// add when widget loads
window.addEventListener("click", onClickOutside);

……最后还有一些家政服务

// remove listener when destroying the widget
window.removeEventListener("click", onClickOutside);

我在YUI 3中是这样做的：

// Detect the click anywhere other than the overlay element to close it.
Y.one(document).on('click', function (e) {
    if (e.target.ancestor('#overlay') === null && e.target.get('id') != 'show' && overlay.get('visible') == true) {
        overlay.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(); 
});

注意：应该避免使用stopPropagation，因为它会破坏DOM中的正常事件流。有关更多信息，请参阅这篇CSS技巧文章。请考虑改用此方法。

将单击事件附加到关闭窗口的文档正文。将一个单独的单击事件附加到容器，以停止传播到文档正文。

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

正如另一位海报所说，有很多陷阱，特别是如果你正在显示的元素（在本例中是菜单）具有交互元素。我发现以下方法相当稳健：

$('#menuscontainer').click(function(event) {
    //your code that shows the menus fully

    //now set up an event listener so that clicking anywhere outside will close the menu
    $('html').click(function(event) {
        //check up the tree of the click target to check whether user has clicked outside of menu
        if ($(event.target).parents('#menuscontainer').length==0) {
            // your code to hide menu

            //this event listener has done its job so we can unbind it.
            $(this).unbind(event);
        }

    })
});

$("body > div:not(#dvid)").click(function (e) {
    //your code
});