这是面向未来观众的普通JavaScript解决方案。

单击文档中的任何元素时，如果已切换所单击元素的id，或者隐藏元素未隐藏且隐藏元素不包含所单击元素，则切换该元素。

(function () {
    "use strict";
    var hidden = document.getElementById('hidden');
    document.addEventListener('click', function (e) {
        if (e.target.id == 'toggle' || (hidden.style.display != 'none' && !hidden.contains(e.target))) hidden.style.display = hidden.style.display == 'none' ? 'block' : 'none';
    }, false);
})();

（函数（）{“使用严格”；var hidden=document.getElementById（'hidden'）；document.addEventListener（'click'，函数（e）{如果（e.target.id==“toggle”| |（hidden.style.display！=“none”&&！hidden.concloss（e.target）））hidden.syle.display=hidden.sstyle.display==“none？”block'：'无'；}，假）；})();<a href=“javascript:void（0）”id=“toggle”>切换隐藏潜水</a><div id=“hidden”style=“display:none；”>此内容通常是隐藏的。单击此内容以外的任何位置，使我消失</div>

如果您要在同一页面上进行多个切换，可以使用以下方式：

将隐藏的类名添加到可折叠项中。单击文档后，关闭所有不包含所单击元素且未隐藏的隐藏元素如果单击的元素是切换，请切换指定的元素。

（函数（）{“使用严格”；var hiddenItems=document.getElementsByClassName（'hidden'），隐藏；document.addEventListener（'click'，函数（e）{for（var i=0；hidden=hiddenItems[i]；i++）{如果（！hidden.contains（e.target）&&hidden.style.display！='无”）hidden.style.display=“无”；}if（e.target.getAttribute（'data-toggle'））{var toggle=document.querySelector（e.target.getAttribute（'data-toggle'））；toggle.style.display=toggle.style.display==“无”？'block'：'无'；}}，假）；})();<a href=“javascript:void（0）”data toggle=“#hidden1”>切换隐藏潜水</a><div class=“hidden”id=“hidden1”style=“display:none；”data hidden=“true”>此内容通常隐藏</div><a href=“javascript:void（0）”data toggle=“#hidden2”>切换隐藏潜水</a><div class=“hidden”id=“hidden2”style=“display:none；”data hidden=“true”>此内容通常隐藏</div><a href=“javascript:void（0）”data toggle=“#hidden3”>切换隐藏潜水</a><div class=“hidden”id=“hidden3”style=“display:none；”data hidden=“true”>此内容通常隐藏</div>

订阅捕获阶段的点击以处理调用preventDefault的点击元素。使用其他名称在文档元素上重新触发它，单击任意位置。

document.addEventListener('click', function (event) {
  event = $.event.fix(event);
  event.type = 'click-anywhere';
  $document.trigger(event);
}, true);

然后，在需要单击外部功能的地方，订阅文档上的单击任意位置事件，并检查单击是否在您感兴趣的元素之外：

$(document).on('click-anywhere', function (event) {
  if (!$(event.target).closest('#smth').length) {
    // Do anything you need here
  }
});

一些注意事项：

您必须使用文档，因为在发生单击的所有元素上触发事件是性能错误。这个功能可以封装到特殊的插件中，在外部点击时调用一些回调。您不能使用jQuery本身订阅捕获阶段。您不需要加载文档来订阅，因为订阅是在文档上进行的，甚至不在其主体上，所以它总是独立于脚本放置和加载状态而存在。

投票选出最受欢迎的答案，但添加

&& (e.target != $('html').get(0)) // ignore the scrollbar

因此，单击滚动条不会隐藏目标元素。

我读过2021的所有内容，但若并没有错的话，也并没有人提出过这样简单的建议，来解除和删除事件。使用了前面的两个答案和更多的小技巧，所以我把所有的都放在了一个里面（它也可以作为一个参数添加到函数中以传递选择器，以获得更多的弹出窗口）。

也许有人知道这个笑话是有用的。也可以这样做：

<div id="container" style="display:none"><h1>my menu is nice, but it disappears if I click outside it</h1></div>

<script>
  function printPopup() {
    $("#container").css({"display": "block"});
    var remListener = $(document).mouseup(function (e) {
      if ($(e.target).closest("#container").length === 0 &&
          (e.target != $('html').get(0)))
      {
        //alert('closest call');
        $("#container").css({"display": "none"});
        remListener.unbind('mouseup'); // Isn't it?
      }
    });
  }

  printPopup();

</script>

我只是想让@Pistos的回答更加明显，因为它隐藏在评论中。

这个解决方案非常适合我

var elementToToggle = $('.some-element');
$(document).click( function(event) {
  if( $(event.target).closest(elementToToggle).length === 0 ) {
    elementToToggle.hide();
  }
});

在CoffeeScript中：

elementToToggle = $('.some-element')
$(document).click (event) ->
  if $(event.target).closest(elementToToggle).length == 0
    elementToToggle.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>