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

$(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");

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

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

使用.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(); 
});

试试这个：

$('html').click(function(e) {
  if($(e.target).parents('#menuscontainer').length == 0) {
    $('#menuscontainer').hide();
  }
});

https://jsfiddle.net/4cj4jxy0/

但请注意，如果单击事件无法到达html标记，则这将无法工作。（可能其他元素已停止传播（））。

为了更易于使用和表达代码，我为此创建了一个jQuery插件：

$('div.my-element').clickOut(function(target) { 
    //do something here... 
});

注意：target是用户实际单击的元素。但回调仍然在原始元素的上下文中执行，所以您可以像在jQuery回调中预期的那样使用它。

插件：

$.fn.clickOut = function (parent, fn) {
    var context = this;
    fn = (typeof parent === 'function') ? parent : fn;
    parent = (parent instanceof jQuery) ? parent : $(document);

    context.each(function () {
        var that = this;
        parent.on('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.is(that) && !clicked.parents().is(that)) {
                if (typeof fn === 'function') {
                    fn.call(that, clicked);
                }
            }
        });

    });
    return context;
};

默认情况下，单击事件侦听器放置在文档上。但是，如果要限制事件侦听器范围，可以传入一个jQuery对象，该对象表示父级元素，该元素将是侦听单击的顶级父级元素。这可以防止不必要的文档级事件侦听器。显然，除非提供的父元素是初始元素的父元素，否则它将无法工作。

使用方式如下：

$('div.my-element').clickOut($('div.my-parent'), function(target) { 
    //do something here...
});

$("#menuscontainer").click(function() {
    $(this).focus();
});
$("#menuscontainer").blur(function(){
    $(this).hide();
});

对我来说很好。

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

$(".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元素内，那么单击或移动菜单本身应该不会有问题。