Close a div when clicked outside the div and its button

Question

i have a div(target) controlled(show/hide) by a button. When the button is triggered the div will show up.. at that moment when i click outside anywhere other than button or that div(target). the div(target) should get hide.

i have tried with the event.stopPropagation(); but no result found

button

<div class="applicationTrigger appbtn">
  <i class="so-icon"></i>
</div>

target div

<div class="app-drop"></div>

when i use event.stopPropagation(); method the complete button action is not working.

Please create a [mre]. In general, clicks outside a (popup?) div are handled by having a ([semi]transparent) fullscreen element below the div to catch the clicks. — , Jul 16 '19 at 09:29
This [answer](https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it) might have what you need. — Leo Silver, Jul 16 '19 at 09:32

score 2 · Accepted Answer · answered Jul 16 '19 at 09:34

I have attached the demo which will work as per your requirement. Click on the button will display the div content. If you click outside the div it will hide the content of div.

$(document).mouseup(function (e){
    var container = $(".wrapper");
 if (!container.is(e.target) && container.has(e.target).length === 0){
  container.fadeOut();
 }
}); 

$(document).on('click','#show_btn',function (e){
   $(".wrapper").toggle();
});

.wrapper{
   display:none;
   height:200px;
   width:100px;
   border:1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gall
</div>
<button id="show_btn" type="button">Show</button>

score 0 · Answer 2 · answered Jul 16 '19 at 09:45

You need to register a global listener for click. Then get the two instances for the button and the target div. When global click event dispatched, compare the target on that event with the two instances you get early. If they not same run the hide code.

const button = document.getElementsByClassName('applicationTrigger')[0];
const target = document.getElementsByClassName('app-drop')[0];
document.addEventListener('click', (e) => {
const clickedTarget = e.target;
   if (clickedTarget !== button && clickedTarget !== target) {
     // hide code
   }
});

see this example

score 0 · Answer 3 · answered Jul 16 '19 at 11:16

You want to disable the div when user click on outside of the button. Ok, first of all I would like to say that you pointed out that you have try out event.stopPropagation() and did'nt get expected result...The stopPropagation() method will only prevents further propagation of the current event in the capturing and bubbling phases and this situation is not related to your problem.

The following code will behave as you expected.

<div class="your-upper-most-div" onclick="hideAppDrop(event)">
</div>
------------------------------------
<script>
   function hideAppDrop(event) {
      let element = document.getElementById("app-drop-id");
      if(event.target.className !== "applicationTrigger appbtn"){
          element.style.display = "none";
      }
      else{
          element.style.display = "block";
      }
   }
</script>

Close a div when clicked outside the div and its button

3 Answers3