Javascript jQuery 单击页面中除 1 div 之外的任意位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12661797/
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
jQuery click anywhere in the page except on 1 div
提问by Vincent Roye
How can I trigger a function when I click anywhere on my page except on one div (id=menu_content) ?
当我单击页面上除一个 div ( id=menu_content)之外的任何位置时，如何触发功能？
回答by Adil
You can apply clickon bodyof document and cancel clickprocessing if the clickevent is generated by div with id menu_content, This will bind event to single element and saving binding of clickwith every element except menu_content
你可以申请click对body文件和取消click处理，如果click是由ID为DIV生成的事件menu_content，这将绑定事件到单个元素和节约的结合click与除每一个元素menu_content
$('body').click(function(evt){
if(evt.target.id == "menu_content")
return;
//For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
if($(evt.target).closest('#menu_content').length)
return;
//Do processing of click event here for every element except with id menu_content
});
回答by nbrooks
See the documentation for jQuery Event Target. Using the target property of the event object, you can detect where the click originated within the #menu_contentelement and, if so, terminate the click handler early. You will have to use .closest()to handle cases where the click originated in a descendant of #menu_content.
请参阅jQuery 事件目标的文档。使用事件对象的 target 属性，您可以检测#menu_content元素内点击的来源，如果是，则提前终止点击处理程序。您将不得不使用.closest()来处理点击源自 的后代的情况#menu_content。
$(document).click(function(e){
// Check if click was triggered on or within #menu_content
if( $(e.target).closest("#menu_content").length > 0 ) {
return false;
}
// Otherwise
// trigger your click function
});
回答by Database_Query
try this
尝试这个
$('html').click(function() {
//your stuf
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
you can also use the outside events
你也可以使用 外部事件
回答by gandalf
I know that this question has been answered, And all the answers are nice. But I wanted to add my two cents to this question for people who have similar (but not exactly the same) problem.
我知道这个问题已经回答了，而且所有的答案都很好。但是我想为有类似（但不完全相同）问题的人在这个问题上加两分钱。
In a more general way, we can do something like this:
以更一般的方式，我们可以这样做：
$('body').click(function(evt){
if(!$(evt.target).is('#menu_content')) {
//event handling code
}
});
This way we can handle not only events fired by anything except element with id menu_contentbut also events that are fired by anything except any element that we can select using CSS selectors.
通过这种方式，我们不仅可以处理除带有 id 的menu_content元素之外的任何元素触发的事件，还可以处理除我们可以使用 CSS 选择器选择的任何元素之外的任何元素触发的事件。
For instance in the following code snippet I am getting events fired by any element except all <li>elements which are descendants of div element with id myNavbar.
例如，在下面的代码片段中，除了<li>作为 id 的 div 元素的后代的所有元素外，我都会收到由任何元素触发的事件myNavbar。
$('body').click(function(evt){
if(!$(evt.target).is('div#myNavbar li')) {
//event handling code
}
});
回答by Nate
here is what i did. wanted to make sure i could click any of the children in my datepicker without closing it.
这是我所做的。想确保我可以在不关闭它的情况下单击我的日期选择器中的任何孩子。
$('html').click(function(e){
if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
// clicked menu content or children
} else {
// didnt click menu content
}
});
my actual code:
我的实际代码：
$('html').click(function(e){
if (e.target.id != 'datepicker'
&& $(e.target).parents('#datepicker').length == 0
&& !$(e.target).hasClass('datepicker')
) {
$('#datepicker').remove();
}
});
