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

我有一个按钮，当它被点击时，显示一个div与图像（如聊天的表情符号面板），如果我再次点击它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 } }); 

UPDATE

这样你就可以拥有一套完整的工作集：

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

Answer 2

在显示原始

，在页面中添加一个新的

，其样式/ css设置如下：

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

确保原始

– 您希望能够在不关闭它的情况下单击它 – 具有更高的z-index ，但页面上的其他所有内容都具有更低的z-index。

将新div添加到页面时，请为其指定.ui-widget-overlay类，并添加一个单击处理程序来拦截该

上的点击。 使用单击处理程序添加overlay div如下所示：

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

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

Answer 3

这里的$（“div”）选择器应该是你的div，例如id或类：如果

那么$("div")将改为$("div.class")或$("div#id")

Answer 4

更新

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

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

Answer 5

 
 
 Clickable Label 
 
 
 
 
 
 This is the hidden content of my DIV Window 
 
 I am for test click on me 
 
 $('.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/