如何在jquery中捕获任何点击事件[重复]

Question

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

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

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

单击“myBtn”时，div 会自动显示和隐藏。我该如何解决？

感谢您的宝贵时间。

Answer 1

您可以尝试以下方法：

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

Answer 2

在显示原始<div> 的同时，将新的<div> 添加到具有如下样式/css 设置的页面：

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

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

当您将新 div 添加到您的页面时，给它.ui-widget-overlay 类，并添加一个点击处理程序来拦截对该<div> 的点击。使用点击处理程序添加覆盖 div 如下所示：

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

这一切的结果是：你有两个 div。第一个是您要显示的内容并允许用户在不关闭它的情况下单击它，第二个是第一个下方的不可见 div 占据整个浏览器窗口，因此如果用户单击除上部 div 之外的任何位置，它会拦截单击事件.在该点击事件中，您移除隐藏的 div 并隐藏原始 div。

Answer 3

<script type="text/javascript">
  $('body').click(function() {
   if($("div").is(':visible')){
    $("div").hide();
   }
  });
</script>

这里的 $("div") 选择器应该是您的 div，它要么具有 id 要么具有类例如：如果 <div class="class" id="id"> 则 $("div") 将更改为 $("div.class") 或 $("div#id")

Answer 4

更新

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

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

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

  }

});

Answer 5

<div class="slControlWrapper">
    <div class="slControlLabel">
        <asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
    </div>
    <div class="slControlSeparator">

    </div>
    <div class="slControlDropDown">

    </div>
     <div id="wndSL">
        This is the hidden content of my DIV Window
    </div>
    <div id="test">
    I am for test click on me
    </div>
</div>


 $('.slControlLabel, .slControlDropDown').bind('click',function(event){

   $('#wndSL').show(); 
 event.stopPropagation();
 });


$('html').click(function() {
   $('#wndSL').hide(); 
});


    #wndSL {

display:none;     background-color: blue;    height:500px;    width:590px;
}

在这里看看：

http://jsfiddle.net/nCZmz/26/