How do I hide an element on a click event anywhere outside of the element

Question

I would like to know whether this is the correct way of hiding visible elements when clicked anywhere on the page      document  click function  event                        myDIV visible   hide          The element  div  span  etc   shouldn t disappear when a click event occurs within the boundaries of the element

User · Answer

What you can also do is     document  click function  e       var container      div        if   container is e target   amp  amp  container has e target  length     0       container fadeOut  slow                 If your target is not a div then hide the div by checking its length is equal to zero

User · Answer

Thanks  Thomas  I m new to JS and I ve been looking crazy for a solution to my problem  Yours helped   I ve used jquery to make a Login-box that slides down  For best user experience I desided to make the box disappear when user clicks somewhere but the box  I m a little bit embarrassed over using about four hours fixing this  But hey  I m new to JS   Maybe my code can help someone out    lt body gt   lt button class  login  gt Logg inn lt  button gt   lt script type  text javascript  gt          button login   click function              if     div box first   is   hidden                         div box   slideDown  slow                  else                      div box   slideUp  slow                                   lt  script gt   lt div id  box  gt Lots of login content lt  div gt    lt script type  text javascript  gt      var box       box        var login       login         login click function             box show    return false                 document  click function             box hide                 box click function e            e stopPropagation              lt  script gt    lt  body gt

User · Answer

Another way of hiding the container div when a click happens in a not children element     document  on  click   function e        if    contains     yourContainer   get 0   e target                 yourContainer   hide

User · Answer

html   click function       Hide the menus if it is visible          menu container   click function event       event stopPropagation          but you need to keep in mind these things as well  http   css-tricks com dangers-stopping-event-propagation

User · Answer

Here is a working CSS small JS  solution based on the answer of Sandeep Pal     document  click function  e      if       noticeMenu   is e target   amp  amp      noticeMenu   has e target  length    0             menu-toggle3   prop  checked   false             Try it out by clicking the checkbox and then outside of the menu   https   jsfiddle net qo90txr8

User · Answer

This following code example seems to work best for me   While you can use  return false  that stops all handling of that event for the div or any of it s children   If you want to have controls on the pop-up div  a pop-up login form for example  you need to use event stopPropogation      lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt title gt  lt  title gt   lt  head gt   lt body gt       lt a id  link  href     gt show box lt  a gt       lt div id  box  style  background   eee  display  none  gt           lt p gt a paragraph of text lt  p gt           lt input type  file     gt       lt  div gt        lt script src  jquery js  type  text javascript  gt  lt  script gt        lt script type  text javascript  gt          var box       box            var link       link             link click function                 box show    return false                         document  click function                 box hide                         box click function e                e stopPropagation                      lt  script gt   lt  body gt   lt  html gt

User · Answer

As of jQuery 1 7 there s a new way to handle events  I thought I d answer here just to demonstrate how I might go about doing this the  new  way  If you haven t  I recommend you read the jQuery docs for the  on  method   var handler   function event        if the target is a descendent of container do nothing   if   event target  is   container   container      return        remove event handler from document     document  off  click   handler         dostuff      document  on  click   handler     Here we re abusing jQuery s selectors and bubbling of events  Note that I make sure I clean the event handler up afterwards  You can automate this behaviour with     container   one  see  docs  but because we need to do conditionals within the handler that isn t applicable here

User · Answer

Try this       myDiv   click function e      button click class name is myDiv   e stopPropagation            function        document  click function            myDiv   hide      hide the button              I use class name instead of ID  because in asp net you have to worry about the extra stuff  net attaches to the id  EDIT- Since you added a another piece  it would work like this        myDiv   click function       button click class name is myDiv   e stopPropagation            function          openDiv   click function           myDiv   show                document  click function            myDiv   hide      hide the button

User · Answer

If I understand  you want to hide a div when you click anywhere but the div  and if you do click while over the div  then it should NOT close  You can do that with this code     document  click function         alert  me            myDiv   click function e        e stopPropagation       This is the preferred method      return false            This should not be used unless you do not want                             any click events registering inside the div       This binds the click to the entire page  but if you click on the div in question  it will cancel the click event

User · Answer

x000D   x000D    document  ready function    x000D   x000D     button   click function    x000D      x000D          x000D              div3   toggle 1000   x000D          x000D        body   click function event    x000D     if   event target  attr  class       1   amp  amp    event target  attr  class       div3    x000D             div3   hide 1000    x000D           x000D      x000D       x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 2 6 jquery min js  gt  lt  script gt  x000D   lt button class  1  gt Click to fade in boxes lt  button gt  lt br gt  lt br gt  x000D   x000D   lt body style  width 100  height 200px background-color pink   gt  x000D   lt div class  div3  style  width 80px height 80px display none background-color blue   gt  lt  div gt  lt body gt  x000D   x000D   x000D

User · Answer

document  mouseup function  e        var mydiv      div mydiv        if   mydiv is e target   amp  amp  mydiv has e target  length     0          search slideUp

User · Answer

I did the below  Thought of sharing so someone else could also benefit      div newButtonDiv   click function          this  find  ul sub-menu   css   display   block            this  click function event           event stopPropagation               html   click function                  this  find  ul sub-menu   css   display   none                             Let me know if I can help someone on this

User · Answer

Just 2 small improvements to the above suggestions    unbind the document click when done  stop propagation on the event that triggered this  assuming its a click  jQuery thelink  click function e       jQuery thepop  show            bind the hide controls     var jpop jQuery thepop       jQuery document  bind  click hidethepop   function                 jpop hide                   unbind the hide controls             jQuery document  unbind  click hidethepop                   dont close thepop when you click on thepop     jQuery thepop  click function e            e stopPropagation                   and dont close thepop now      e stopPropagation

User · Answer

This doesn t work - it hides the  myDIV when you click inside of it       openDiv   click function e        myDiv   show     e stopPropagation          document  click function          myDiv   hide                 lt a class  openDiv  gt DISPLAY DIV lt  a gt    lt div class  myDiv  gt HIDE DIV lt  div gt

User · Answer

document  on  click   function e       Hides the div by clicking any where in the screen         if     e target  closest   suggest input   length                     suggest div   show             else if       e target  closest   suggest container   length                     suggest div   hide                        Here  suggest input in is the name of textbox and  suggest container is the ul class name and  suggest div is the main div element for my auto-suggest   this code is for hiding the div elements by clicking any where in the screen  Before doing every thing please understand the code and copy it

User · Answer

This is made from the other solutions above    document  ready function              quot button quot   click function event              quot  area quot   toggle            event stopPropagation         stops the click event to go  quot throu quot  the button an hit the document                         document  click function                quot  area quot   hide                             quot  interface quot   click function event            event stopPropagation            return false                                                         lt div gt       lt div gt           lt button gt  Press here for content lt  button gt          lt div class  quot area quot  gt           lt div class  quot interface quot  gt  Content lt  div gt         lt  div gt       lt  div gt          lt  div gt

User · Answer

Try this  it s  working perfect for me     document  mouseup function  e        var searchcontainer       search container         if   searchcontainer is e target     if the target of the click isn t the container             amp  amp  searchcontainer has e target  length     0         nor a descendant of the container               searchcontainer hide

User · Answer

Simple Solution  hide an element on a click event anywhere outside of some specific element     document  on  click   function                          element   hide                                  element will not Hide on click some specific control inside document                 control-1   on  click   function  e                    e stopPropagation

User · Answer

element    focusout function           your code on element

User · Answer

Try this      document  mouseup function  e        var div       yourdivid        if   div is e target   amp  amp  div has e target  length     0                div hide

[jquery] How do I hide an element on a click event anywhere outside of the element?

Examples related to jquery

Examples related to events

Examples related to event-bubbling