作为Art这个伟大答案的包装，并使用OP最初要求的语法，这里有一个jQuery扩展，它可以记录在集合元素之外是否发生了单击。

$.fn.clickOutsideThisElement = function (callback) {
    return this.each(function () {
        var self = this;
        $(document).click(function (e) {
            if (!$(e.target).closest(self).length) {
                callback.call(self, e)
            }
        })
    });
};

然后你可以这样打电话：

$("#menuscontainer").clickOutsideThisElement(function() {
    // handle menu toggle
});

这是小提琴演示

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

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

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

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

用纯JavaScript编写的方法

let menu = document.getElementById("menu");

document.addEventListener("click", function(){
    // Hide the menus
    menu.style.display = "none";
}, false);

document.getElementById("menuscontainer").addEventListener("click", function(e){
    // Show the menus
    menu.style.display = "block";
    e.stopPropagation();
}, false);

作为Art这个伟大答案的包装，并使用OP最初要求的语法，这里有一个jQuery扩展，它可以记录在集合元素之外是否发生了单击。

$.fn.clickOutsideThisElement = function (callback) {
    return this.each(function () {
        var self = this;
        $(document).click(function (e) {
            if (!$(e.target).closest(self).length) {
                callback.call(self, e)
            }
        })
    });
};

然后你可以这样打电话：

$("#menuscontainer").clickOutsideThisElement(function() {
    // handle menu toggle
});

这是小提琴演示

对于某些人来说，这可能是一个更好的解决方案。

$(".menu_link").click(function(){
    // show menu code
});

$(".menu_link").mouseleave(function(){
    //hide menu code, you may add a timer for 3 seconds before code to be run
});

我知道mouseleave不仅意味着在外面单击，还意味着离开该元素的区域。

一旦菜单本身位于menu_link元素内，那么单击或移动菜单本身应该不会有问题。

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

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