JQuery click anywhere on the page except 1 div

Question

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

Thank you very much

Answer 1

You can apply click in the body document and cancel click processing if the click event is generated by a div with id menu_content . This will associate the event with one item and retain the click binding with each item 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 }); 

Answer 2

try it

  $('html').click(function() { //your stuf }); $('#menucontainer').click(function(event){ event.stopPropagation(); }); 

you can also use external events

Answer 3

See the documentation for jQuery Event Target . Using the target property of the event object, you can detect where the click occurred in the #menu_content element, and if so, #menu_content the click handler earlier. You will need to use .closest() to handle cases where a click originated from 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 }); 

Answer 4

I know that this question was answered, And all the answers are good. But I wanted to add my two cents to this question for people who have a similar (but not quite the same) problem. Adils answer is really good. More generally, we can do something like this:

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

Thus, we not only handle events that are triggered by anything other than an element with id = "menu_content", but also we can handle events that are triggered by anything except any element that we can select using CSS selectors. for example, in the following code snippet, I get events triggered by any element except all li elements that are descendants of a div element with id = "myNavbar"

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

Answer 5

here is what i did. wanted me to click on any of the children in my dump 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 is:

 $('html').click(function(e){ if (e.target.id != 'datepicker' && $(e.target).parents('#datepicker').length == 0 && !$(e.target).hasClass('datepicker') ) { $('#datepicker').remove(); } });