注意：应该避免使用stopPropagation，因为它会破坏DOM中的正常事件流。有关更多信息，请参阅这篇CSS技巧文章。请考虑改用此方法。

将单击事件附加到关闭窗口的文档正文。将一个单独的单击事件附加到容器，以停止传播到文档正文。

$(window).click(function() {
  //Hide the menus if visible
});

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

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

如果您正在为IE和FF 3.*编写脚本，并且您只想知道单击是否发生在某个框区域内，您也可以使用以下内容：

this.outsideElementClick=函数（objEvent，objElement）{var objCurrentElement=objEvent.target | | objEvent.srcElement；var blnSideX=false；var blnSideY=false；如果（objCurrentElement.getBoundingClientRect（）.left>=objElement.getBoundingClientRect（）.left&&objCurrentElement.getBoundingClientRectblnSideX=真；如果（objCurrentElement.getBoundingClientRect（）.top>=objElement.getBoundingClientRect（）.ttop&&objCurrentElement.getBoundingClientRectblnSideY=真；如果（blnSideX&&blnSideY）return false；其他的返回true；}

解决方案1

不要使用event.stopPropagation（），因为它会产生一些副作用，只需定义一个简单的标志变量并添加一个if条件。我对此进行了测试，工作正常，没有任何stopPropagation的副作用：

var flag = "1";
$('#menucontainer').click(function(event){
    flag = "0"; // flag 0 means click happened in the area where we should not do any action
});

$('html').click(function() {
    if(flag != "0"){
        // Hide the menus if visible
    }
    else {
        flag = "1";
    }
});

解决方案2

只有一个简单的if条件：

$(document).on('click', function(event){
    var container = $("#menucontainer");
    if (!container.is(event.target) &&            // If the target of the click isn't the container...
        container.has(event.target).length === 0) // ... nor a descendant of the container
    {
        // Do whatever you want to do when click is outside the element
    }
});

作为一种变体：

var $menu = $('#menucontainer');
$(document).on('click', function (e) {

    // If element is opened and click target is outside it, hide it
    if ($menu.is(':visible') && !$menu.is(e.target) && !$menu.has(e.target).length) {
        $menu.hide();
    }
});

它在停止事件传播方面没有问题，并且更好地支持同一页面上的多个菜单，其中当第一个菜单打开时，单击第二个菜单将使stopPropagation解决方案中的第一个菜单保持打开状态。

这里的其他解决方案不适合我，所以我不得不使用：

if(!$(event.target).is('#foo'))
{
    // hide menu
}

编辑：普通Javascript变体（2021-03-31）

我使用这个方法来处理在单击下拉菜单外部时关闭下拉菜单的问题。

首先，我为组件的所有元素创建了一个自定义类名。这个类名将被添加到组成菜单小部件的所有元素中。

const className = `dropdown-${Date.now()}-${Math.random() * 100}`;

我创建了一个函数来检查单击和单击元素的类名。如果clicked元素不包含我上面生成的自定义类名，它应该将show标志设置为false，菜单将关闭。

const onClickOutside = (e) => {
  if (!e.target.className.includes(className)) {
    show = false;
  }
};

然后，我将单击处理程序附加到窗口对象。

// add when widget loads
window.addEventListener("click", onClickOutside);

……最后还有一些家政服务

// remove listener when destroying the widget
window.removeEventListener("click", onClickOutside);