Javascript 文档单击不在元素jQuery中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10851312/
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
Document click not in elements jQuery
提问by Hymantheripper
Using jQuery how does one detect clicks not on specific elements, and perform an action consequently?
使用 jQuery 如何检测不是在特定元素上的点击，并因此执行操作？
I have the following JavaScript
我有以下 JavaScript
$('#master').click(function() {
$('#slave').toggle();
});
$(document).not('#master','#slave').click(function() {
$('#slave').hide();
});
and I cannot see where I am going wrong logically. You can see a live example here
而且我无法从逻辑上看出我哪里出错了。你可以在这里看到一个活生生的例子
回答by Frédéric Hamidi
Since you're binding to the clickevent on the document, you can use event.targetto get the element that initiated the event:
由于您绑定到click文档上的事件，您可以使用event.target来获取启动事件的元素：
$(document).click(function(event) {
if (!$(event.target).is("#master, #slave")) {
$("#slave").hide();
}
});
EDIT:As Mattias rightfully points out in his comment, the code above will fail to identify click events coming from descendants of #masterand #slave(if there are any). In this situation, you can use closest()to check the event's target:
编辑：正如 Mattias 在他的评论中正确指出的那样，上面的代码将无法识别来自#masterand后代的点击事件#slave（如果有的话）。在这种情况下，您可以使用最近的（）来检查事件的目标：
$(document).click(function(event) {
if (!$(event.target).closest("#master, #slave").length) {
$("#slave").hide();
}
});
回答by Razor
Does this code do what you want? (not entirely sure if I understood correctly)
这段代码做你想要的吗？（不完全确定我是否理解正确）
$('body').on('click', '*:not( #master, #slave )', function() {
$('#slave').hide();
});
回答by zzzzBov
Event delegation has long been supported natively by jQuery. The difficulty lies in creating the appropriate selector. Originally, delegatewas used, but more recently the delegate form of onshould be used.
jQuery 长期以来一直支持事件委托。难点在于创建合适的选择器。最初，delegate被使用，但最近on应该使用的委托形式。
The purpose of event delegation is to listen to events on child elements and invoke the bound event handlers on those elements as though they had been bound to the child element, instead of the parent. This means that instead of binding handlers to everyelement in the DOM, you're binding a handler to every element in the initial selection (documentis a single element). This also makes for a simple way to use a single selector to bind to an ever changing set of elements, as new elements will propagate their events to documentwhether or not they existed when the initial event handler was bound:
事件委托的目的是侦听子元素上的事件并调用这些元素上的绑定事件处理程序，就好像它们已绑定到子元素而不是父元素一样。这意味着您不是将处理程序绑定到DOM 中的每个元素，而是将处理程序绑定到初始选择中的每个元素（document是单个元素）。这也为使用单个选择器绑定到一组不断变化的元素提供了一种简单的方法，因为新元素将document在绑定初始事件处理程序时将其事件传播到它们是否存在：
$(document).on('click', '*:not(#master, #master *, #slave, #slave *)', function (e) {
//this will reference the clicked element
});
Additionally, note that I not only said the elements must not be #masteror #slave, they must notbe children of #masteror #slaveeither.
此外，请注意，我不仅说的元素一定不能#master或者#slave，他们绝不能成为孩子#master或#slave无论是。
回答by SpYk3HH
Another thought, it may not be working because your browser may not be rendering bodyat 100% height; Try adjusting your base css to fix height of body and then a couple other thoughts.
另一个想法，它可能无法工作，因为您的浏览器可能无法body以 100% 的高度呈现；尝试调整您的基础 css 以修复身体的高度，然后再考虑其他一些想法。
e.stopPropagation(): Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
e.stopPropagation()：防止事件向上冒泡 DOM 树，防止任何父处理程序收到事件通知。
So if you change the first click code to the following:
因此，如果您将第一次点击代码更改为以下内容：
$('#master').click(function(e) {
e.stopPropagation();
$('#slave').toggle();
});
Then you could change the call sign of the second too:
然后你也可以改变第二个的呼号：
$("body, body *").not('#master, #slave').click(function(e) {
$('#slave').hide();
});
And that should cover it. Give it a try! or see this jsFiddle
这应该涵盖它。试一试！或者看这个 jsFiddle
回答by Snigdha Batra
Fredrik's answers works for elements already present in the document, but it didn't work for elements fetched by ajax calls. I tried the following and it works for me. Sharing the code for future ajax coders.
Fredrik 的答案适用于文档中已经存在的元素，但不适用于 ajax 调用获取的元素。我尝试了以下方法，它对我有用。为未来的 ajax 编码人员共享代码。
$(document).on('click',function(event) {
if (!$(event.target).closest("#selector").length) {
if ($('#selector').is(":visible"))
$('#selector').slideUp();
}
});
Would have posted it as a comment but I don't have enough reputation for that.
本来可以将其作为评论发布，但我对此没有足够的声誉。
回答by I. S.
$('.clickable-row').on("click",function(){
window.location = $(this).data('href');
return false;
});
$("td > a").on("click",function(e){
e.stopPropagation();
});
or
或者
jQuery(document).ready(function($) {
$('.clickable-row').on("click",function(){
window.location = $(this).data('href');
return false;
});
$("td > a").on("click",function(e){
e.stopPropagation();
});
});
