这对我来说很好。我不是专家。

$(document).click(function(event) {
  var $target = $(event.target);
  if(!$target.closest('#hamburger, a').length &&
  $('#hamburger, a').is(":visible")) {
    $('nav').slideToggle();
  }
});

该事件具有元素的名为event.path的属性，该属性是“以树顺序列出其所有祖先的静态有序列表”。要检查事件是否源自特定DOM元素或其子元素之一，只需检查该特定DOM元素的路径。它还可以用于通过在some函数中对元素检查进行逻辑“或”运算来检查多个元素。

$（“body”）.click（函数）{target=document.getElementById（“main”）；flag=event.path.some（函数（el，i，arr）{返回（el==目标）})if（标志）{console.log（“内部”）}其他{console.log（“外部”）}});#主要的，主要的{显示：内联块；背景：黄色；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“main”>＜ul＞<li>测试总管</li><li>测试总管</li><li>测试总管</li><li>测试总管</li><li>测试总管</li></ul></div><div id=“main2”>外部主管道</div>

所以你的情况应该是

$("body").click(function() {
  target = $("#menuscontainer")[0];
  flag = event.path.some(function(el, i, arr) {
    return (el == target)
  });
  if (!flag) {
    // Hide the menus
  }
});

还在寻找检测外部点击的完美解决方案？别再看了！介绍Clickout Event，这是一个为Clickout和其他类似事件提供通用支持的包，它适用于所有场景：普通HTML onclickout属性、普通JavaScript的.addEventListener（'clickkout'）、jQuery的.on（'click kout'”）、Vue.js的v-on:cclickout指令。只要前端框架内部使用addEventListener来处理事件，Clickout Event适用于它。只需在页面中的任何位置添加脚本标记，它就会像魔术一样发挥作用。

HTML属性

<div onclickout="console.log('clickout detected')">...</div>

香草JavaScript

document.getElementById('myId').addEventListener('clickout', myListener);

jQuery

$('#myId').on('clickout', myListener);

Vue.js

<div v-on:clickout="open=false">...</div>

有棱角的

<div (clickout)="close()">...</div>

这是一个容器或整个文档中的解决方案。若click目标在元素之外（类为“yourClass”），则元素被隐藏。

$('yourContainer').on('click', function(e) {
  if (!$(e.target).hasClass('yourClass')) {
    $('.yourClass').hide();
  }
});

使用可访问性焦点

这里有一个答案说（非常正确），关注点击事件是一个可访问性问题，因为我们想迎合键盘用户。在这里使用focusout事件是正确的，但它可以比其他答案（以及纯JavaScript）简单得多：

更简单的方法是：

使用focusout的“问题”是，如果对话框/模式/菜单中的某个元素由于“内部”的原因而失去焦点，则事件仍然会被激发。我们可以通过查看event.relatedTarget（它告诉我们哪个元素将获得焦点）来检查情况是否并非如此。

dialog = document.getElementById("dialogElement")

dialog.addEventListener("focusout", function (event) {
    if (
        // We are still inside the dialog so don't close
        dialog.contains(event.relatedTarget) ||
        // We have switched to another tab so probably don't want to close
        !document.hasFocus()
    ) {
        return;
    }
    dialog.close();  // Or whatever logic you want to use to close
});

上面有一个小错误，那就是relatedTarget可能为空。如果用户在对话框外单击，这很好，但如果用户在对话内单击，而对话框恰好不可聚焦，则会出现问题。要解决此问题，必须确保将tabIndex设置为0，以便对话框可聚焦。

这是我解决问题的方法。

$(window).click(function (event) {
    //To improve performance add a checklike 
    //if(myElement.isClosed) return;
    var isClickedElementChildOfMyBox = isChildOfElement(event,'#id-of-my-element');

    if (isClickedElementChildOfMyBox)
        return;

    //your code to hide the element 
});

var isChildOfElement = function (event, selector) {
    if (event.originalEvent.path) {
        return event.originalEvent.path[0].closest(selector) !== null;
    }

    return event.originalEvent.originalTarget.closest(selector) !== null;
}