(只是添加到prc322的答案。)

在我的例子中，我使用这段代码来隐藏当用户单击适当的选项卡时出现的导航菜单。我发现添加一个额外的条件很有用，即容器外的点击目标不是链接。

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!$("a").is(e.target) // if the target of the click isn't a link ...
        && !container.is(e.target) // ... or the container ...
        && container.has(e.target).length === 0) // ... or a descendant of the container
    {
        container.hide();
    }
});

这是因为我网站上的一些链接为页面添加了新内容。如果在添加新内容的同时导航菜单消失了，用户可能会迷失方向。

您可以将tabindex设置为父元素<div>，而不是监听DOM上的每一次单击以隐藏一个特定的元素，并监听focusout事件。

设置tabindex将确保在<div>上触发模糊事件(通常不会)。

所以你的HTML看起来是这样的:

<div class="form_wrapper" tabindex="0">
    <a class="agree" href="javascript:;">I Agree</a>
    <a class="disagree" href="javascript:;">Disagree</a>
</div>

你的JS:

$('.form_wrapper').on('focusout', function(event){
    $('.form_wrapper').hide();
});

通过使用这段代码，您可以隐藏尽可能多的项目

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})

dojo.query(document.body).connect('mouseup',function (e)
{
    var obj = dojo.position(dojo.query('div#divselector')[0]);
    if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
        MyDive.Hide(id);
    }
});

根据prc322的精彩答案构建。

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var 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();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

这增加了一些东西……

放置在带有“unlimited”参数的回调函数中 添加了对jquery的.off()的调用，与事件名称空间配对，以便在事件运行后将其从文档中解绑定。 包括触摸端移动功能

我希望这能帮助到一些人!

这么多答案我都用不上。相反，我采取了公认的答案(工作得很好)，并缩短为以下(使用后代选择器):

$(document).mouseup(function(e) 
{
    if (!$(e.target).is("#targetSelector,#targetSelector *")) {
        $('#targetSelector').hide();
    }
});

因为它只以用户交互的速度运行，没有给变量赋值