Use jQuery to hide a DIV when the user clicks outside of it

Question

I am using this code      body   click function            form wrapper   hide             form wrapper   click function event      event stopPropagation          And this HTML    lt div class  form wrapper  gt      lt a class  agree  href  javascript    gt I Agree lt  a gt      lt a class  disagree  href  javascript    gt Disagree lt  a gt   lt  div gt    The problem is that I have links inside the div and when they no longer work when clicked

User · Answer

Attach a click event to top level elements outside the form wrapper, for example:

$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});

This will also work on touch devices, just make sure you don't include a parent of .form_wrapper in your list of selectors.

User · Answer

Live demo with ESC functionality  Works on both Desktop and Mobile  var notH   1       pop       form wrapper   hover function    notH  1         document  on  mousedown keydown   function  e      if notH  e which  27   pop hide            If for some case you need to be sure that your element is really visible when you do clicks on the document  if  pop is   visible    amp  amp   notH  e which  27    pop hide

User · Answer

I was working over a search box which shows the autocomplete according to the processed keywords  When i dont want to click over any option then i will use the below code to hide the processed list and it works     document  click function          suggestion-box   html            Suggestion-box is my autocomplete container where i am showing the values

User · Answer

document  ready function          headings   click function         sub1   css  display               headings   click function     return false         sub1   click function     return false        body   click function         sub1   css  display   none

User · Answer

And for Touch devices like IPAD and IPHONE we can use following code    document  on  touchstart   function  event    var container      YOUR CONTAINER SELECTOR     if   container is e target     if the target of the click isn t the container     amp  amp  container has e target  length     0         nor a descendant of the container               container hide

User · Answer

So many answers  must be a right of passage to have added one    I didn t see a current  jQuery 3 1 1  answers - so     function            body   on  mouseup   function                 your-selector   hide

User · Answer

Built off of prc322 s awesome answer   function hideContainerOnMouseClickOut selector  callback      var args   Array prototype slice call arguments      Save convert arguments to array since we won t be able to access these within  on       document  on  mouseup clickOFF touchend clickOFF   function  e        var container     selector        if   container is e target     if the target of the click isn t the container             amp  amp  container has e target  length     0         nor a descendant of the container             container hide            document  off  mouseup clickOFF touchend clickOFF          if  callback  callback apply this  args                   This adds a couple things      Placed within a function with a callback with  unlimited  args Added a call to jquery s  off   paired with a event namespace to unbind the event from the document once it s been run  Included touchend for mobile functionality   I hope this helps someone

User · Answer

This code detects any click event on the page and then hides the  CONTAINER element if and only if the element clicked was neither the  CONTAINER element nor one of its descendants     document  on  click   function  e        if    e target  closest   CONTAINER   length     0                CONTAINER   hide

User · Answer

Return false if you click on  form wrapper      body   click function           form wrapper   click function      return false            form wrapper   hide               form wrapper   click function event        event stopPropagation

User · Answer

Updated the solution to    use mouseenter and mouseleave instead of hover use live event binding   var mouseOverActiveElement   false       active   live  mouseenter   function        mouseOverActiveElement   true      live  mouseleave   function         mouseOverActiveElement   false          html   click function         if   mouseOverActiveElement            console log  clicked outside active element

User · Answer

body   click function event        if     event target  is  p                      e2ma-menu   hide                p is the element name  Where one can pass the id or class or element name also

User · Answer

By using this code you can hide as many items as you want   var boxArray     first element s id   second element s id   nth element s id       window addEventListener  mouseup   function event      for var i 0  i  lt  boxArray length  i         var box   document getElementById boxArray i        if event target    box  amp  amp  event target parentNode    box           box style display    none

User · Answer

You might want to check the target of the click event that fires for the body instead of relying on stopPropagation   Something like      body   click     function e          if e target className      form wrapper                   form wrapper   hide                   Also  the body element may not include the entire visual space shown in the browser   If you notice that your clicks are not registering  you may need to add the click handler for the HTML element instead

User · Answer

dojo query document body  connect  mouseup  function  e        var obj   dojo position dojo query  div divselector   0        if     e clientX  gt  obj x  amp  amp  e clientX  lt  obj x obj w    amp  amp   e clientY  gt  obj y  amp  amp  e clientY  lt  obj y obj h               MyDive Hide id

User · Answer

var n   0      container   mouseenter function     n   0      mouseleave function     n   1          html   click function     if  n    1    alert  clickoutside

User · Answer

Here s a jsfiddle I found on another thread  works with esc key also  http   jsfiddle net S5ftb 404      var button       open   0      var el           test   0         button  on  click   function e            el  show         e stopPropagation                 document  on  click   function e          if    e target  closest el  length     0              el  hide                         document  on  keydown   function e          if  e keyCode     27              el  hide

User · Answer

document  click function event        if      event target  hasClass  form wrapper                   form wrapper   hide

User · Answer

i did it like this   var close   true     function              body   click  function             if close               div hide                      close   true           alleswasdenlayeronclicknichtschliessensoll click  function                 close   false

User · Answer

if you have trouble with ios  mouseup is not working on apple device   does mousedown  mouseup in jquery work for the ipad   i use this     document  bind  touchend   function e            var container      YOURCONTAINER               if  container has e target  length     0                            container hide

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  http   ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt   lt  script gt   lt script gt    document  ready function          hide   click function           p   hide                show   click function           p   show               lt  script gt   lt  head gt   lt body gt   lt p gt If you click on the  Hide  button  I will disappear  lt  p gt   lt button id  hide  gt Hide lt  button gt   lt button id  show  gt Show lt  button gt   lt  body gt   lt  html gt

User · Answer

You might encounter some issues when using the accepted answer with pop-up windows  There might be a case where clicking on a random place might result in unwanted actions  i e  clicking on a button by mistake might take you to a new page  I am not sure if this is the most efficient solution but to prevent this I would suggest using a screenmask  Make sure the screenmask is right below the  lt body gt  tag so that it can cover all the screen by width 100   height  100   Also note that it is above all elements by z-index  99  If you want another item or div to be clickable when the screenmask is active  just assign a higher z-index to that item or div  The screenmask is initially not-displayed  displayed none  and it calls a hide function when clicked  onclick  quot hidemenu   quot     lt body gt   lt div class  quot screenmask quot  onclick  quot hidemenu   quot  style  quot position fixed  width  100   height  100   top  0px  right  0px  display  none  z-index  99  quot  gt  lt  div gt    The javascript functions to deal with  quot multiple distinct pop-up menus on the same page quot  might be like the ones below   lt script gt     an element with onclick  quot showmenu  id here   quot  pops a menu in the screen function showmenu id        var popmenu   document getElementById id      assume popmenu is of class  cardmenu       cardmenu   hide         clear the screen from other popmenus first     menu  show                pop the desired specific menu       screenmask   show       activate screenmask        function hidemenu             called when clicked on the screenmask       cardmenu   hide         clear the screen from all the popmenus       screenmask   hide       deactivate screenmask    lt  script gt

User · Answer

Instead of listening to every single click on the DOM to hide one specific element  you could set tabindex to the parent  lt div gt  and listen to the focusout events   Setting tabindex will make sure that the blur event is fired on the  lt div gt   normally it wouldn t    So your HTML would look like    lt div class  form wrapper  tabindex  0  gt       lt a class  agree  href  javascript    gt I Agree lt  a gt       lt a class  disagree  href  javascript    gt Disagree lt  a gt   lt  div gt    And your JS       form wrapper   on  focusout   function event           form wrapper   hide

User · Answer

You d better go with something like this   var mouse is inside   false     document  ready function             form content   hover function             mouse is inside true          function             mouse is inside false                   body   mouseup function             if   mouse is inside      form wrapper   hide

User · Answer

Toggle for regular and touch devices  I read some answers here a while back and created some code I use for div s that function as popup bubbles       openPopupBubble   click function            popupBubble   toggle         if     popupBubble   css  display        block              document  bind  mousedown touchstart   function e               if     openPopupBubble   is e target         openPopupBubble   find      is e target                      this  unbind e                              else if      popupBubble   find      is e target                        popupBubble   hide                      this  unbind e                                         You can also make this more abstract using classes and select the correct popup bubble based on the button that triggered the click event      body   on  click     openPopupBubble   function          this  next   popupBubble   toggle         if   this  next   popupBubble   css  display        block              document  bind  mousedown touchstart   function e               if   this  is e target       this  find      is e target                      this  unbind e                              else if    this  next   popupBubble   find      is e target                      this  next   popupBubble   hide                      this  unbind e

User · Answer

Just adding on to prc322 s answer    In my case I m using this code to hide a navigation menu that appears when the user clicks an appropriate tab  I found it was useful to add an extra condition  that the target of the click outside the container is not a link     document  mouseup function  e        var container      YOUR CONTAINER SELECTOR         if      a   is e target     if the target of the click isn t a link              amp  amp   container is e target         or the container              amp  amp  container has e target  length     0         or a descendant of the container               container hide                This is because some of the links on my site add new content to the page  If this new content is added at the same time that the navigation menu disappears it might be disorientating for the user

User · Answer

x000D   x000D  var exclude div       ExcludedDiv       x000D    document  click function e   x000D     if   exclude div is  e target         if target div is not the one you want to exclude then add the class hidden x000D              myDiv1   addClass  hidden      x000D   x000D       x000D   x000D   x000D    FIDDLE

User · Answer

x000D   x000D    document  ready function     x000D       modal-container   on  click   function e    x000D     if e target      this  0     x000D      this  removeClass  active       or hide   x000D       x000D       x000D      x000D   modal-container   x000D   display  none  x000D   justify-content  center  x000D   align-items  center  x000D   position  absolute  x000D   top  0  x000D   left  0  x000D   right  0  x000D   bottom  0  x000D   background-color  rgba 0 0 0 0 5   x000D   z-index  999  x000D    x000D   x000D   modal-container active   x000D      display  flex    x000D    x000D   x000D   modal   x000D   width  50   x000D   height  auto  x000D   margin  20px  x000D   padding  20px  x000D   background-color   fff  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  modal-container active  gt  x000D    lt div class  modal  gt  x000D     lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Aenean ac varius purus  Ut consectetur viverra nibh nec maximus  Nam luctus ligula quis arcu accumsan euismod  Pellentesque imperdiet volutpat mi et cursus  Sed consectetur sed tellus ut finibus  Suspendisse porttitor laoreet lobortis  Nam ut blandit metus  ut interdum purus  lt  p gt  x000D    lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Had the same problem  came up with this easy solution  It s even working recursive     document  mouseup function e         var container      YOUR CONTAINER SELECTOR            if the target of the click isn t the container nor a descendant of the container     if   container is e target   amp  amp  container has e target  length     0                 container hide

User · Answer

A solution without jQuery for the most popular answer   document addEventListener  mouseup   function  e        var container   document getElementById  your container ID         if   container contains e target             container style display    none           bind this      MDN  https   developer mozilla org en docs Web API Node contains

User · Answer

Even sleaker      html   click function             wrapper visible   hide

User · Answer

Wouldn t something like this work      body     not   form wrapper   click function            or     body   not  form wrapper    click function

User · Answer

According to the docs   blur   works for more than the  lt input gt  tag  For example       form wrapper   blur function         this  hide

User · Answer

What you can do is bind a click event to the document that will hide the dropdown if something outside the dropdown is clicked  but won t hide it if something inside the dropdown is clicked  so your  show  event  or slidedown or whatever shows the dropdown            form wrapper   show function               document  bind  click   function  e                var clicked     e target               if   clicked parents   hasClass  class-of-dropdown-container                           form wrapper   hide                                         Then when hiding it  unbind the click event    document  unbind  click

User · Answer

Live DEMO  Check click area is not in the targeted element or in it s child    document  click function  e        if    e target  parents   dropdown   length     0                dropdown   hide                UPDATE   jQuery stop propagation is the best solution  Live DEMO      button   click function e           dropdown   show         e stopPropagation             dropdown   click function e       e stopPropagation           document  click function            dropdown   hide

User · Answer

This solution should work fine  it s easy    jQuery document  ready function          jQuery document  click function event            if typeof  jQuery event target  attr  class       undefined                 var classnottobeclickforclose     donotcountmeforclickclass1    donotcountmeforclickclass2   donotcountmeforclickclass3                var arresult   jQuery inArray jQuery event target  attr  class    classnottobeclickforclose               if  arresult  lt  0                    jQuery   popup   hide                                          In Above code change donotcountmeforclickclass1   donotcountmeforclickclass2 etc with classes which you have used to show popup or on it s click popup should not effect so you have to definitely add class which you are using to open popup   Change  popup class with popup class

User · Answer

Copied from https   sdtuts com click-on-not-specified-element   Live demo http   demos sdtuts com click-on-specified-element    document  ready function          var is specified clicked          specified element   click function              is specified clicked   true          setTimeout function                  is specified clicked   false             200                     click function              if  is specified clicked    true      WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS                 event result   text  you were clicked on specified element              else     WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED                 event result   text  you were clicked not on specified element

User · Answer

I think it can be a lot easier  I did it like this       not  form wrapper    click function             form wrapper   hide

[jquery] Use jQuery to hide a DIV when the user clicks outside of it

Examples related to jquery

Examples related to html

Examples related to hide

Examples related to styling