要隐藏文件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();
    }
});

我不认为你真正需要的是当用户在外面点击时关闭菜单；您需要的是当用户单击页面上的任何位置时关闭菜单。如果你点击菜单，或者离开菜单，它应该会关闭吗？

发现上面没有令人满意的答案，促使我前几天写了这篇博文。对于更迂腐的人，有很多陷阱需要注意：

如果在单击时将单击事件处理程序附加到body元素，请确保在关闭菜单并解除事件绑定之前等待第二次单击。否则，打开菜单的单击事件将弹出到必须关闭菜单的侦听器。若在单击事件上使用event.stopProposition（），则页面中的其他元素都不能在任何位置单击以关闭功能。无限期地将click事件处理程序附加到body元素不是一个高性能的解决方案将事件的目标及其父级与处理程序的创建者进行比较时，假设您想要的是在单击关闭菜单时关闭菜单，而真正想要的是当您单击页面上的任何位置时关闭菜单。监听body元素上的事件会使代码更加脆弱。像这样无辜的风格会破坏它：body｛margin-left:auto；margin-right:auto；width:960px；｝

我在以下方面取得了成功：

var $menuscontainer = ...;

$('#trigger').click(function() {
  $menuscontainer.show();

  $('body').click(function(event) {
    var $target = $(event.target);

    if ($target.parents('#menuscontainer').length == 0) {
      $menuscontainer.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，以便对话框可聚焦。

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

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

这应该是有效的：

$('body').click(function (event) {
    var obj = $(event.target);
    obj = obj['context']; // context : clicked element inside body
    if ($(obj).attr('id') != "menuscontainer" && $('#menuscontainer').is(':visible') == true) {
        //hide menu
    }
});