我们实现了一个解决方案，部分基于上面用户的评论，这非常适合我们。我们使用它来隐藏搜索框/结果，当在这些元素之外单击时，不包括最初的元素。

// HIDE SEARCH BOX IF CLICKING OUTSIDE
$(document).click(function(event){ 
    // IF NOT CLICKING THE SEARCH BOX OR ITS CONTENTS OR SEARCH ICON 
    if ($("#search-holder").is(":visible") && !$(event.target).is("#search-holder *, #search")) {
        $("#search-holder").fadeOut('fast');
        $("#search").removeClass('active');
    }
});

它首先检查搜索框是否已经可见，在我们的例子中，它还删除了隐藏/显示搜索按钮上的活动类。

我已经使用了下面的脚本并完成了jQuery。

jQuery(document).click(function(e) {
    var target = e.target; //target div recorded
    if (!jQuery(target).is('#tobehide') ) {
        jQuery(this).fadeOut(); //if the click element is not the above id will hide
    }
})

下面是HTML代码

<div class="main-container">
<div> Hello I am the title</div>
<div class="tobehide">I will hide when you click outside of me</div>
</div>

你可以在这里阅读教程

尝试以下代码：

if ($(event.target).parents().index($('#searchFormEdit')) == -1 &&
    $(event.target).parents().index($('.DynarchCalendar-topCont')) == -1 &&
    (_x < os.left || _x > (os.left + 570) || _y < os.top || _y > (os.top + 155)) &&
    isShowEditForm) {

    setVisibleEditForm(false);
}

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

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

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

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

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

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