Javascript 如何捕获jquery中的任何单击事件

我有一个按钮，当它被点击时，会显示一个带有图像的div（就像聊天室的表情面板），如果我再次点击它，div就会隐藏，但我想做的是： 如果div已经显示，然后我单击页面的任何其他内容，我想隐藏它。我试过这个：

$("myBtn").click(function(){
    // show div
});

$(document).click(function(){
// hide div
});

单击“myBtn”时，div将显示并自动隐藏。我怎样才能修好它

谢谢您的时间。

更新

假设在元素显示时有一个“活动”的类，它将是：

$('html').click(function(e){

  if(!$(e.target).attr("id") == "my-id") { 

  }

});

$（'body'）。单击（函数（）{
如果（$（“div”）是（':visible'））{
$（“div”）.hide（）；
}
});

此处的$（“div”）选择器应该是具有id或类的div，例如：如果

，则

$（“div”）

将更改为

$（“div.class”）

或

$（“div#id”）

您可以尝试以下方法：

$(document).on('click', function(evt) {
    if(!$(evt.target).is('#my-id')) {
        //Hide
    }
});

更新

这样您就可以拥有完整的工作集：

$('#mybutton').on('click', function(evt) {
    $('#mydiv').show();
    return false;//Returning false prevents the event from continuing up the chain
});

在显示原始的
的同时，向页面添加一个新的
，其样式/css设置如下：

.ui-widget-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
}

$('<div class="ui-widget-overlay">')
    .click(function() {
        $('.ui-widget-overlay').remove();
        $('selector-for-original-div').hide();
    })
    .appendTo('body');

确保原始的
——您希望能够在不关闭它的情况下单击的那一个——具有较高的
z-index
，但页面上的所有其他内容都具有较低的z-index

当您将新div添加到页面时，为其提供
.ui小部件覆盖
类，并添加一个单击处理程序来拦截对该
的单击。使用单击处理程序添加覆盖div如下所示：

.ui-widget-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
}

$('<div class="ui-widget-overlay">')
    .click(function() {
        $('.ui-widget-overlay').remove();
        $('selector-for-original-div').hide();
    })
    .appendTo('body');

$（“”）
。单击（函数（）{
$（'.ui小部件覆盖'）.remove（）；
$（'selector-for-original-div'）.hide（）；
})
.附于（“主体”）；

这一切的结果是：你有两个div。第一个是您希望显示的内容，允许用户在不关闭它的情况下单击，第二个是第一个下方的一个不可见div，占据整个浏览器窗口，因此如果用户单击除上div之外的任何位置，它将拦截单击事件。在单击事件中，您删除隐藏的div并隐藏原始div。
对我有效，只需单击那里，先生。我知道
wnd
是匈牙利语用于Window，但什么是
sl
？为什么您的解决方案中有ASP控件标记？-1丑陋，单击显示的div仍然隐藏错误。也许
sl
意味着“服务器标签”？我仍然不理解语义。您可能希望在选择器中比
“div”
更具体，尤其是作为OP可能明确使用的通用示例。感谢@Mathletics我添加了解释。永远不要使用
$（'div#id'））
因为这是过度指定的，实际上会使Sizzle无法使用
getElementById（）
优化。我尝试捕获如下单击事件：$（“div”）。单击（函数（）{/}但它会为网页中的每个div元素执行内部代码。因此，它会显示和隐藏divClose，但在不需要时，它会非常难看。@Chad，谢谢你的评论。你会怎么做？我很乐意改进我的代码。你清理了大部分代码，但你绑定到了
'html'
，这并不是“错的”“但惯例是要约束
文档
。谢谢，我学到了两件事，在这种情况下“on”和“document”的使用。这将修复我的代码。干杯。B。@chad和@Mathletics谢谢。
。on
应该用于所有事件。：）出于好奇，.on（'click'，…）和.click（…）之间有什么区别？一个比另一个好吗？@CharlieKilian
click
一直是
bind（“click”）
的甜头；on排除了所有这些语法，并包含了新的简单委托语法
。on（事件、子选择器、回调）
+1 to@Mathletics，以便于解释。关于更多信息，这里是jQuery站点的链接：有用的解释。返回错误使我的一天。。。谢谢。是的，这是一个常见的实现，但它与实际问题非常相切。这种方法也有效，但说到效率，上面的答案是最好的。谢谢你的帮助。