Use:

var go = false;
$(document).click(function(){
    if(go){
        $('#divID').hide();
        go = false;
    }
})

$("#divID").mouseover(function(){
    go = false;
});

$("#divID").mouseout(function (){
    go = true;
});

$("btnID").click( function(){
    if($("#divID:visible").length==1)
        $("#divID").hide(); // Toggle
    $("#divID").show();
});

这是一个更通用的解决方案，它允许监视多个元素，并动态地从队列中添加和删除元素。

它保存一个全局队列（autoCloseQueue）——一个对象容器，用于在外部单击时应关闭的元素。

每个队列对象键都应该是DOM元素id，值应该是一个具有2个回调函数的对象：

 {onPress: someCallbackFunction, onOutsidePress: anotherCallbackFunction}

将其放入文档就绪回调中：

window.autoCloseQueue = {}  

$(document).click(function(event) {
    for (id in autoCloseQueue){
        var element = autoCloseQueue[id];
        if ( ($(e.target).parents('#' + id).length) > 0) { // This is a click on the element (or its child element)
            console.log('This is a click on an element (or its child element) with  id: ' + id);
            if (typeof element.onPress == 'function') element.onPress(event, id);
        } else { //This is a click outside the element
            console.log('This is a click outside the element with id: ' + id);
            if (typeof element.onOutsidePress == 'function') element.onOutsidePress(event, id); //call the outside callback
            delete autoCloseQueue[id]; //remove the element from the queue
        }
    }
});

然后，当创建id为“menuscontainer”的DOM元素时，只需将此对象添加到队列：

window.autoCloseQueue['menuscontainer'] = {onOutsidePress: clickOutsideThisElement}

这是面向未来观众的普通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>

当只有一个元素需要管理时，这里的解决方案工作得很好。然而，如果有多个元素，问题就复杂得多。e.stopPropagation（）的技巧和其他所有技巧都不起作用。

我想出了一个解决方案，也许不是那么容易，但总比什么都没有好。看看：

$view.on("click", function(e) {

    if(model.isActivated()) return;

        var watchUnclick = function() {
            rootView.one("mouseleave", function() {
                $(document).one("click", function() {
                    model.deactivate();
                });
                rootView.one("mouseenter", function() {
                    watchUnclick();
                });
            });
        };
        watchUnclick();
        model.activate();
    });

对于iPad和iPhone等触摸设备，我们可以使用以下代码：

$(document).on('touchstart', function (event) {
    var container = $("YOUR CONTAINER SELECTOR");

    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();
    }
});

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

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