标记为接受答案的答案没有考虑到元素上可以有覆盖，如对话框、弹出窗口、日期选择器等。单击这些按钮不应隐藏元素。

我制作了自己的版本，确实考虑到了这一点。它是作为KnockoutJS绑定创建的，但它可以很容易地仅转换为jQuery。

它通过第一次查询所有具有z索引或绝对位置的可见元素来工作。然后，如果在外部单击，它会根据我想要隐藏的元素来测试这些元素。如果是命中，我会计算一个新的边界矩形，该矩形考虑到覆盖边界。

ko.bindingHandlers.clickedIn = (function () {
    function getBounds(element) {
        var pos = element.offset();
        return {
            x: pos.left,
            x2: pos.left + element.outerWidth(),
            y: pos.top,
            y2: pos.top + element.outerHeight()
        };
    }

    function hitTest(o, l) {
        function getOffset(o) {
            for (var r = { l: o.offsetLeft, t: o.offsetTop, r: o.offsetWidth, b: o.offsetHeight };
                o = o.offsetParent; r.l += o.offsetLeft, r.t += o.offsetTop);
            return r.r += r.l, r.b += r.t, r;
        }

        for (var b, s, r = [], a = getOffset(o), j = isNaN(l.length), i = (j ? l = [l] : l).length; i;
            b = getOffset(l[--i]), (a.l == b.l || (a.l > b.l ? a.l <= b.r : b.l <= a.r))
                && (a.t == b.t || (a.t > b.t ? a.t <= b.b : b.t <= a.b)) && (r[r.length] = l[i]));
        return j ? !!r.length : r;
    }

    return {
        init: function (element, valueAccessor) {
            var target = valueAccessor();
            $(document).click(function (e) {
                if (element._clickedInElementShowing === false && target()) {
                    var $element = $(element);
                    var bounds = getBounds($element);

                    var possibleOverlays = $("[style*=z-index],[style*=absolute]").not(":hidden");
                    $.each(possibleOverlays, function () {
                        if (hitTest(element, this)) {
                            var b = getBounds($(this));
                            bounds.x = Math.min(bounds.x, b.x);
                            bounds.x2 = Math.max(bounds.x2, b.x2);
                            bounds.y = Math.min(bounds.y, b.y);
                            bounds.y2 = Math.max(bounds.y2, b.y2);
                        }
                    });

                    if (e.clientX < bounds.x || e.clientX > bounds.x2 ||
                        e.clientY < bounds.y || e.clientY > bounds.y2) {

                        target(false);
                    }
                }
                element._clickedInElementShowing = false;
            });

            $(element).click(function (e) {
                e.stopPropagation();
            });
        },
        update: function (element, valueAccessor) {
            var showing = ko.utils.unwrapObservable(valueAccessor());
            if (showing) {
                element._clickedInElementShowing = true;
            }
        }
    };
})();

使用本机JS API最接近方法的2020解决方案。

document.addEventListener（'click'，（｛target｝）=>{if（！target.lestest（'#menupop'））{document.querySelector（'#menupop'）.style.display=“无”}})#菜单弹出窗口{宽度：300px；高度：300px；背景色：红色；}<div id=“menupop”>单击外部将关闭此</div>

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

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

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

订阅捕获阶段的点击以处理调用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本身订阅捕获阶段。您不需要加载文档来订阅，因为订阅是在文档上进行的，甚至不在其主体上，所以它总是独立于脚本放置和加载状态而存在。

我知道这个问题有一百万个答案，但我一直喜欢使用HTML和CSS来完成大部分工作。在这种情况下，z索引和定位。我找到的最简单的方法如下：

$（“#show trigger”）.click（function（）{$（“#element”）.animate（｛width:'toggle'｝）；$（“#外部元素”）.show（）；});$（“#外部元素”）.click（function（）{$（“#element”）.hide（）；$（“#外部元素”）.hide（）；});#外部元件{位置：固定；宽度：100%；高度：100%；z指数：1；显示：无；}#元素{显示：无；填充：20px；背景色：#ccc；宽度：300px；z指数：2；位置：相对；}#显示触发器{填充：20px；背景色：#ccc；边距：20px自动；z指数：2；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“outside element”></div><div id=“element”><div class=“menu item”><a href=“#1”>菜单项1</a></div><div class=“menu item”><a href=“#2”>菜单项1</a></div><div class=“menu item”><a href=“#3”>菜单项1</a></div><div class=“menu item”><a href=“#4”>菜单项1</a></div></div><div id=“show trigger”>显示菜单</div>

这创建了一个安全的环境，因为除非菜单实际打开，否则不会触发任何内容，并且z索引保护元素中的任何内容在被单击时不会产生任何错误。

此外，您不需要jQuery用传播调用覆盖所有基础，也不需要清除所有内部元素中的错误。

const button=document.querySelector（'button'）const box=document.querySelector（'.box'）；常量切换=事件=>{event.stopPropagation（）；if（！event.target.closest（'.box'））{console.log（'单击外部'）；box.classList.tggle（“活动”）；box.classList.contains（'active'）? document.addEventListener（'click'，切换）：document.removeEventListener（“单击”，切换）；}其他{console.log（'单击内部'）；}}button.addEventListener（'单击'，切换）；.box格式{位置：绝对；显示：无；页边空白：8px；填充：20px；背景：浅灰色；}.box激活{显示：块；}＜button＞切换框</button＞<div class=“box”><form action=“”><input-type=“text”><button type=“button”>搜索</button></form></div>