假设您想要检测用户在外部或内部单击的div是否具有id，例如：“我的特殊小部件”。

收听身体点击事件：

document.body.addEventListener('click', (e) => {
    if (isInsideMySpecialWidget(e.target, "my-special-widget")) {
        console.log("user clicked INSIDE the widget");
    }
    console.log("user clicked OUTSIDE the widget");
});

function isInsideMySpecialWidget(elem, mySpecialWidgetId){
    while (elem.parentElement) {
        if (elem.id === mySpecialWidgetId) {
            return true;
        }
        elem = elem.parentElement;
    }
    return false;
}

在这种情况下，您不会破坏页面中某些元素的正常点击流，因为您没有使用“stopPropagation”方法。

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

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

这对我有用

$("body").mouseup(function(e) {
    var subject = $(".main-menu");
    if(e.target.id != subject.attr('id') && !subject.has(e.target).length) {
        $('.sub-menu').hide();
    }
});

要隐藏文件TreeClass（如果在其外部单击），请执行以下操作：

jQuery(document).mouseup(function (e) {
    var container = $(".fileTreeClass");
    if (!container.is(e.target) && // If the target of the click isn't the container...
         container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

所有这些答案都解决了这个问题，但我想提供一个完全符合需要的moders es6解决方案。我只是希望让大家对这个可运行的演示感到满意。

window.clickOutSide=（元素，单击外部，单击内部）=>{document.addEventListener（'click'，（event）=>{if（！element.contains（event.target））{if（单击类型内部==“函数”）{单击外侧（）；}}其他{if（单击类型内部==“函数”）{单击内侧（）；}}});};window.clickOutSide（document.querySelector（'.block'），（）=>警报（'clicked outside'）；.块{宽度：400px；高度：400px；背景色：红色；}<div class=“block”></div>

这是我的代码：

// Listen to every click
$('html').click(function(event) {
    if ( $('#mypopupmenu').is(':visible') ) {
        if (event.target.id != 'click_this_to_show_mypopupmenu') {
            $('#mypopupmenu').hide();
        }
    }
});

// Listen to selector's clicks
$('#click_this_to_show_mypopupmenu').click(function() {

  // If the menu is visible, and you clicked the selector again we need to hide
  if ( $('#mypopupmenu').is(':visible') {
      $('#mypopupmenu').hide();
      return true;
  }

  // Else we need to show the popup menu
  $('#mypopupmenu').show();
});