jQuery 如何在jquery中捕获任何点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15234881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to catch any click event in jquery
提问by Mollo
I have a button, when it's clicked, shows a div with images(like an emoticon panel of a chat) if I click it again the div hides, but what I want to do is: If the div is already showed up and then I click any other thing of the page, I want to hide it. I tried this:
我有一个按钮，当它被点击时，会显示一个带有图像的 div（如聊天的表情面板），如果我再次点击它，div 会隐藏，但我想要做的是：如果 div 已经出现，然后我单击页面的任何其他内容，我想隐藏它。我试过这个：
$("myBtn").click(function(){
// show div
});
$(document).click(function(){
// hide div
});
When "myBtn" is clicked, the div shows up and hide automatically. How could I fix it ?
单击“myBtn”时，div 会自动显示并隐藏。我怎么能修好呢？
Thank you for your time.
感谢您的时间。
回答by Kyle
You could try the following:
您可以尝试以下操作：
$(document).on('click', function(evt) {
if(!$(evt.target).is('#my-id')) {
//Hide
}
});
UPDATE
更新
Just so you can have a full working set:
这样你就可以拥有一个完整的工作集：
$('#mybutton').on('click', function(evt) {
$('#mydiv').show();
return false;//Returning false prevents the event from continuing up the chain
});
回答by Charlie Kilian
At the same time you show your original <div>, add a new <div>to your page that has a style/css set like this:
在显示原始文件的同时<div>，<div>向页面添加一个新的样式/css 设置如下：
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
}
Make sure the original <div>-- the one you want to be able to click on without closing it -- has a higher z-index, but everything else on the page has a lower z-index.
确保原始文件<div>——您希望能够在不关闭它的情况下点击的那个文件——具有更高的z-index，但页面上的其他所有内容的 z-index 都较低。
When you add the new div to your page, give it the .ui-widget-overlayclass, and add a click handler to intercept clicks on that <div>. Adding the overlay div with the click handler looks like this:
当你将新的 div 添加到你的页面时，给它.ui-widget-overlay类，并添加一个点击处理程序来拦截对该 div 的点击<div>。使用单击处理程序添加覆盖 div 如下所示：
$('<div class="ui-widget-overlay">')
.click(function() {
$('.ui-widget-overlay').remove();
$('selector-for-original-div').hide();
})
.appendTo('body');
The upshot of all this: You have two divs. The first is what you want to display and allow users to click in without closing it, the second is an invisible div underneath the first taking up the entire browser window so that if the user clicks anywhere but the upper div, it intercepts the click event. Inside that click event, you remove the hidden div and hide the original.
所有这一切的结果：你有两个 div。第一个是你想要显示的，允许用户点击而不关闭它，第二个是第一个下方的不可见 div 占据整个浏览器窗口，这样如果用户点击除了上面的 div 之外的任何地方，它会拦截点击事件. 在该单击事件中，您删除隐藏的 div 并隐藏原始 div。
回答by Bertrand
updated
更新
Assuming that you have a class 'active' to the element when it shows, it would be:
假设您在元素显示时有一个“活动”类，它将是：
$('html').click(function(e){
if(!$(e.target).attr("id") == "my-id") {
}
});
回答by Bertrand
<script type="text/javascript">
$('body').click(function() {
if($("div").is(':visible')){
$("div").hide();
}
});
</script>
the $("div") selector here should be your div that is either has id or class for example: if the <div class="class" id="id">then $("div")will be changed to $("div.class")or $("div#id")
这里的 $("div") 选择器应该是你的 div，它要么有 id 要么有类，例如：如果<div class="class" id="id">then$("div")将更改为$("div.class")或$("div#id")
回答by Supplement
<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;
}
Have a gander here:
在这里看看：
