jQuery click anywhere in the page except on 1 div

Question

How can I trigger a function when I click anywhere on my page except on one div (id=menu_content) ?

Graven

Answer 1

You can apply click on body of document and cancel click processing if the click event is generated by div with id menu_content, This will bind event to single element and saving binding of click with every element except 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

});

Inordinate

what about descendant childs in the DIV? – Scorpio

We can use closest to check of source of event has any ancestor with id menu_content like if($(evt.target).closest('#menu_content').length) retrun; check my updated answer. – Inordinate

Since closest begins with the current element, it handles clicking on menu_content, as well as clicking on descendents. I think the second if is all you need. – Cajuput

if ($(evt.target).closest('#menu_content').length) { return; } Somehow bootstrap 3.3 doesn't work for me in a modal window. Cannot find closest(). Always .length == 0 – Registrar

Answer 2

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_content element 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.

$(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
});

Glyceryl

Answer 3

try this

 $('html').click(function() {
 //your stuf
 });

 $('#menucontainer').click(function(event){
     event.stopPropagation();
 });

you can also use the outside events

Vanessa

This work, but using event.stopPropagation() can have knock on effects on other JS contained within the parent. – Anitraaniweta

Answer 4

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_content but also events that are fired by anything except any element that we can select using CSS selectors.

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.

$('body').click(function(evt){    
    if(!$(evt.target).is('div#myNavbar li')) {
        //event handling code
    }
});

Obsequious

I just wanted to say that this method worked for me just fine, I used .is() and also .closest() with a css selector that had no ID but just some classes thank you – Philcox

Answer 5

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();
    }
});

Hypochondria

Nice version including clicks ont children and class, should be the picked answer! – Keto

Answer 6

You could try this:

$(":not(#menu_content)").on("click", function(e) {
    e.stopPropagation();
    // Run your function when clicked anywhere except #menu_content
    // Use with caution, 'cause it will prevent clicking on other elements
});

$("#menu_content").on("click", function(e) {
    e.stopPropagation();
    // Run when clicked on #menu_content
});

Abutilon