从 DOM 选择中排除元素及其后代答案

【问题标题】：Exclude element and its descendants from DOM selection从 DOM 选择中排除元素及其后代
【发布时间】：2012-05-20 04:05:07
【问题描述】：

如何使用 CSS 或 jQuery 选择除给定元素及其后代之外的所有 DOM 元素？

假设给定的元素是#test

$('#test *') 将返回所有#test 后代

--但是--

$('* :not(#test))')或$('* :not(#test *))')或$('*').not('#test')或$('*').not('#test *')

不工作！

编辑： 我想在单击页面上除#test 区域之外的任何位置时触发单击事件。

【问题讨论】：

出于什么目的？目的会影响我们应该给出的答案。
我想在点击页面上除#test 区域之外的任意位置时触发点击事件。
你试过这个$("*").not("div#test > *")
是的，我做到了。但这仅适用于直系子女，而我需要排除 #test 的所有后代，无论深度如何。
这个选择器是:not(#test, #test *)，它只能作为一个jQuery选择器工作。您不只使用其中之一（“OR”）；相反，您需要将其中两个结合起来。

【解决方案1】：

系统重启已关闭：

$('*').not('#test, #test *')

尽管如此，我不会将事件绑定到该选择器——它可能会选择太多元素并使您的网站运行缓慢。如果发生这种情况，请考虑改用 jquery 的 live()。

【讨论】：

【解决方案2】：

我不知道确切的 jQuery 代码，但这个 jQuery 脚本似乎正是您要寻找的。p>

希望对你有帮助

【讨论】：

【解决方案3】：

我想在点击页面上除#test 区域之外的任何位置时触发点击事件。

那么您不需要将 click 绑定到每个元素...只需绑定到文档并检查它是否是 $('#test, #test *') 被点击，如果是，则中止点击处理程序：

$(document).on('click', function(e) {
    if ($(e.target).is('#test, #test *')) {
        return;
    }

    // Do stuff
});

【讨论】：

【解决方案4】：

您可以结合@The System Restart 和@topp 的答案来获得请求的行为：

$(document).on('click', function (e) {
    if ($(this).is('#test, #test *')) {
        return;
    }
}

注意我没有测试过这段代码。

【讨论】：

【解决方案5】：

在您的点击事件中检查点击是否在#test:http://jsfiddle.net/QDNCS/内

$(document).click(function(e) {
    if (!$('#test')[0].contains(e.target)) {
        alert('Yay!');
    }
});

【讨论】：