Javascript hide menu on outside click

Question

I got the following html:

<div id="otherdiv"></div>
 <div class="overlay">
  <div class="menu">
    <ul>
      <li><a href="#">Val1</a></li>
     <li><a href="#">Val2</a></li>
    </ul>
   </div>
</div>

and JS code:

$(document).ready(function(){
$('#otherdiv').on('mouseup', function(e){
     var left  = e.clientX  + "px";
     var top  = e.clientY  + "px";
     var div = $('.overlay');
     div[0].style.left = left;
     div[0].style.top = top;
     $(".overlay").show(200);
   });
 $(document).on('click', function(e) {
    $('.overlay').hide(200);
  });
});

I need to hide my .overlay when the user clicks somewhere outside it and show it when the user clicks #otherdiv. When I attach an event to document and click on otherdiv, my overlay shows and then immediately hides. How to fix that behaviour? Thank you.

@iamdevlinph that is for hovering – Adjit Jun 08 '17 at 16:13 — Adjit, Jun 08 '17 at 16:13

XYZ · Accepted Answer · 2017-06-08T16:25:07.927

On document.click check if the event.target is not the #otherdiv or is not a children of the #otherdiv and event.target is not the .overlay or its children then hide the $(".overlay").

A sample snippet.Added a css for the #otherdiv and .overlay for demo>the overlay will be hidden only when the user clicks outside

$(document).ready(function(){
 $('#otherdiv').on('mouseup', function(e){
      e.preventDefault();
     var left  = e.clientX  + "px";
     var top  = e.clientY  + "px";
     var div = $('.overlay');
     div[0].style.left = left;
     div[0].style.top = top;
     $(".overlay").show(200);
   });
  $(document).on('click', function(e) {
  
  if( ! $('#otherdiv').is(e.target)&&    $('#otherdiv').has(e.target).length === 0 && !$('.overlay').is(e.target)  && $('.overlay').has(e.target).length === 0 ){
    $('.overlay').hide(200);
  }
   
  });
});

#otherdiv{
 width:100%;
 height:50px;
 background:#ddd;
}

.overlay{
  
 background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="otherdiv">
  click here to show
</div>
 <div class="overlay">
  <div class="menu">
    <ul>
      <li><a href="#">Val1</a></li>
     <li><a href="#">Val2</a></li>
    </ul>
   </div>
</div>

Adjit · Answer 2 · 2017-06-08T16:17:13.890

click and mouseup events fire at the same time read more about it here - https://www.quirksmode.org/dom/events/click.html

An interesting thing about how jQuery handles animations is it puts things in the queue - so, your hide() animation is queued to run 200ms after show(), even though the both functions are firing at the same time.

Instead, I would just suggest using one click event for this -

$(document).on('click', function(e) {
    if(event.target.id == 'otherdiv' && !$('.overlay').is(":visible")) {
       //do stuff to show
    }
    else if($('.overlay').is(":visible")) {
        $('.overlay').hide(200);
    }
});

The first if checks to make sure that the element with the id otherdiv has been clicked and that the overlay is not currently visible. The next if checks to see if there has been a click and the overlay is visible.

Javascript hide menu on outside click

2 Answers2