如何在jquery中捕获任何点击事件

How to catch any click event in jquery

本文关键字：任何点 事件 jquery      更新时间：2023-09-26

我有一个按钮，当它被点击时，会显示一个带有图像的div(就像聊天的表情面板(。如果我再次点击它，div会隐藏，但我想做的是：如果div已经显示，然后我点击页面上的任何其他东西，我想隐藏它

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

当单击"myBtn"时，div会自动显示并隐藏。我该怎么修？

谢谢你抽出时间。

您可以尝试以下操作：

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

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

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

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

当您将新的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。

更新

假设元素显示时有一个类"活动"，它将是：

$('html').click(function(e){
  if(!$(e.target).attr("id") == "my-id") { 
  }
});

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

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

<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/

相关文章：