jQuery on click on everything but a div and it's children

Question

I want to do something when I click anywhere, except when I click a div and it\'s children. This is what I\'ve tried so far, but it\'s not working (clicking on it\'s childr

Answer 1

Use not with a comma to have both selectors: the element itself and the elements children

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

jsFiddle

Answer 2

I don't have enough requirement to add commend, so I need to ask my question here to @epascarello. When I made few children, A and B still affected. I am not sure I am wrong or not, but I really want to get solution.

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

Live Demo

Answer 3

Instead of

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

});​

You can use (this version is preferred as it is more performant)

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

});​

or

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

});​

Answer 4

You could check inside the function for the element in question:

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