老实说，我不喜欢以前的任何解决方案。

要做到这一点，最好的方法是将“点击”事件绑定到文档，并比较该点击是否真的在元素之外（就像Art在建议中所说的那样）。

然而，您会遇到一些问题：您永远无法解除绑定，并且无法使用外部按钮打开/关闭该元素。

这就是为什么我编写了这个小插件（点击此处链接），以简化这些任务。能简单一点吗？

<a id='theButton' href="#">Toggle the menu</a><br/>
<div id='theMenu'>
    I should be toggled when the above menu is clicked,
    and hidden when user clicks outside.
</div>

<script>
$('#theButton').click(function(){
    $('#theMenu').slideDown();
});
$("#theMenu").dClickOutside({ ignoreList: $("#theButton") }, function(clickedObj){
    $(this).slideUp();
});
</script>

$("#menuscontainer").click(function() {
    $(this).focus();
});
$("#menuscontainer").blur(function(){
    $(this).hide();
});

对我来说很好。

如果您正在为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；}

我在以下方面取得了成功：

var $menuscontainer = ...;

$('#trigger').click(function() {
  $menuscontainer.show();

  $('body').click(function(event) {
    var $target = $(event.target);

    if ($target.parents('#menuscontainer').length == 0) {
      $menuscontainer.hide();
    }
  });
});

逻辑是：当显示#菜单容器时，仅当（单击的）目标不是它的子对象时，才将一个单击处理程序绑定到隐藏#菜单容器的主体。

作为一种变体：

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解决方案中的第一个菜单保持打开状态。

这应该是有效的：

$('body').click(function (event) {
    var obj = $(event.target);
    obj = obj['context']; // context : clicked element inside body
    if ($(obj).attr('id') != "menuscontainer" && $('#menuscontainer').is(':visible') == true) {
        //hide menu
    }
});