$("body > div:not(#dvid)").click(function (e) {
    //your code
}); 

还在寻找检测外部点击的完美解决方案？别再看了！介绍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>

经过研究，我找到了三种可行的解决方案

第一种解决方案

<script>
    //The good thing about this solution is it doesn't stop event propagation.

    var clickFlag = 0;
    $('body').on('click', function () {
        if(clickFlag == 0) {
            console.log('hide element here');
            /* Hide element here */
        }
        else {
            clickFlag=0;
        }
    });
    $('body').on('click','#testDiv', function (event) {
        clickFlag = 1;
        console.log('showed the element');
        /* Show the element */
    });
</script>

第二种解决方案

<script>
    $('body').on('click', function(e) {
        if($(e.target).closest('#testDiv').length == 0) {
           /* Hide dropdown here */
        }
    });
</script>

第三种解决方案

<script>
    var specifiedElement = document.getElementById('testDiv');
    document.addEventListener('click', function(event) {
        var isClickInside = specifiedElement.contains(event.target);
        if (isClickInside) {
          console.log('You clicked inside')
        }
        else {
          console.log('You clicked outside')
        }
    });
</script>

为了更易于使用和表达代码，我为此创建了一个jQuery插件：

$('div.my-element').clickOut(function(target) { 
    //do something here... 
});

注意：target是用户实际单击的元素。但回调仍然在原始元素的上下文中执行，所以您可以像在jQuery回调中预期的那样使用它。

插件：

$.fn.clickOut = function (parent, fn) {
    var context = this;
    fn = (typeof parent === 'function') ? parent : fn;
    parent = (parent instanceof jQuery) ? parent : $(document);

    context.each(function () {
        var that = this;
        parent.on('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.is(that) && !clicked.parents().is(that)) {
                if (typeof fn === 'function') {
                    fn.call(that, clicked);
                }
            }
        });

    });
    return context;
};

默认情况下，单击事件侦听器放置在文档上。但是，如果要限制事件侦听器范围，可以传入一个jQuery对象，该对象表示父级元素，该元素将是侦听单击的顶级父级元素。这可以防止不必要的文档级事件侦听器。显然，除非提供的父元素是初始元素的父元素，否则它将无法工作。

使用方式如下：

$('div.my-element').clickOut($('div.my-parent'), function(target) { 
    //do something here...
});

    $('#menucontainer').click(function(e){
        e.stopPropagation();
     });

    $(document).on('click',  function(e){
        // code
    });

要做到这一点，最广泛的方法是选择网页上的所有内容，除了不希望检测到点击的元素，并在打开菜单时绑定点击事件。

然后，当菜单关闭时，移除绑定。

使用.stopPropagation可防止事件影响菜单容器的任何部分。

$("*").not($("#menuscontainer")).bind("click.OutsideMenus", function ()
{
    // hide the menus

    //then remove all of the handlers
    $("*").unbind(".OutsideMenus");
});

$("#menuscontainer").bind("click.OutsideMenus", function (event) 
{
    event.stopPropagation(); 
});