javascript - jQuery 点击除了 div 和它的子元素之外的所有东西

Question

当我点击任何地方时，我想做一些事情，除非我点击一个 div 并且它是孩子。这是我迄今为止尝试过的，但它不起作用（点击它的孩子仍然执行括号内的内容。

$('body').on('click', '* :not(#calculator)',  function(e){

我不能使用这样的东西：

jQuery - 选择除单个元素及其子元素之外的所有内容？

$("body > *").not("body > #elementtokeep").remove();

因为.not函数不是我可以放在.on()函数内部的东西。

我怎样才能做到这一点？

Answer 1

使用 not 和逗号来同时拥有两个选择器：元素本身和子元素

jQuery(document.body).on("click", ":not(#calculator, #calculator *)", function(e){ 
    console.log(this); 
    e.stopPropagation(); 
});​​​​​​​

jsFiddle

Answer 2

您可以在函数内部检查有问题的元素：

$('body').click( function(e){
    if (!$(e.target).is("#calculator") || $("#calculator").has(e.target).length ) {
        // do your stuff
    }
});

Answer 3

我没有足够的要求来添加推荐，所以我需要在这里向@epascarello 提问。当我生了几个孩子时，A和B仍然受到影响。我不确定我是否错了，但我真的很想得到解决方案。

jQuery(document.body).on("click", ":not(#calculator, #calculator *)", function(e){ 
    console.log(this); 
    e.stopPropagation(); 
    alert('test');
});

现场演示

Answer 4

代替

$('body').on('click', '* :not(#calculator)',  function(e){

});​

您可以使用（首选此版本，因为它性能更高）

$("body").on("click", ":not(#calculator, #calculator *)", function(e){ 

});​

或者

$("body :not(#calculator, #calculator *)").on("click", function(e){ 

});​