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

Question

我有一个按钮，当它被点击时，会显示一个带有图片的div（就像聊天中的表情面板）。如果我再次点击它，该div将隐藏。但是我想做的是：如果该div已经显示并且我点击页面上的任何其他元素，我想隐藏它。我尝试了以下代码：

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

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

当“myBtn”被点击时，div会自动显示并隐藏。我该怎么解决它？感谢您的时间。

- Mollo

---

我尝试像这样捕捉点击事件： $("div").click(function(){//} 但它会对网页中的每个 div 元素执行内部代码。 因此，它会显示和隐藏 div。 - Mollo

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

- Kyle

---

@chad 和 @Mathletics 谢谢。所有事件都应该使用 .on。 :) - Kyle

好奇问一下，.on('click', ...) 和 .click(...) 之间有什么区别？有一个比另一个更受欢迎吗？ - Katie Kilian

click一直是bind("click")的简化写法；on方法替代了它们，并且包含了新的简单委托语法.on(event, childSelector, callback)。 - Evan Davis

+1 给 @Mathletics 的解释。更多信息，请访问 jQuery 网站链接：http://api.jquery.com/on/。 - Kyle

有用的解释。返回 false 让我的一天变得美好...谢谢。 - Mollo

Answer 2

同时在展示原始的<div>的同时，向您的页面添加一个新的<div>，并将其设置为以下样式/CSS：

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

请确保原始的<div>（即您希望能够点击但不关闭的<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并隐藏原始div。

- Katie Kilian

---

是的，这是一种常见的实现方式，但它与实际问题相当不相关。 - Evan Davis

这种方法也可以，但就效率而言，上面的答案是最好的。感谢您的帮助。 - Mollo

Answer 3

已更新

假设当元素显示时您给它一个名为“active”的类，那么代码应该是：

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

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

  }

});

- Bertrand

---

非常接近了，但是无需如此丑陋。 - Chad

@Chad，感谢您的评论。您会怎么做？我很乐意改进我的代码。 - Bertrand

你已经清理了大部分内容，但是你绑定到了 'html'，这并不是“错误”的，但是惯例是绑定到 document。 - Chad

谢谢，我学到了两件事，即'on'和在这种情况下使用'document'。我会修复我的代码。干杯。B。 - Bertrand

Answer 4

<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")

- user1646111

---

你可能想在选择器中更具体一些，而不仅仅是使用“div”，特别是作为一个通用的例子，OP很可能会明确使用它。 - Evan Davis

谢谢 @Mathletics，我添加了解释。 - user1646111

永远不要使用$('div#id')，因为这是过度指定，实际上会使Sizzle无法使用getElementById()优化。 - Chad

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/

- Head

---

对我来说可以用，只需在那里点击即可。 - Head

我知道wnd是窗口的匈牙利命名法，但sl代表什么？ - John Dvorak

你的解决方案中为什么有ASP控件标记？ - Evan Davis

-1很丑，而且在显示的div中点击仍然隐藏，这是错误的。 - Chad

也许 sl 是指“服务器标签”？我仍然不理解其语义。 - John Dvorak

这个答案使用了ASP.NET服务器控件，但并没有被标记为一个ASP.NET问题。 - Katie Kilian