Trigger event if click outside selector

Question

I'm trying to click somewhere other than the button, hide the element, but I do not get it, I have no idea how to do it.

$(function(){
  
  $(document).on('click','#foo',function(){
    let div = $('#bar');
    if( div.css('display') === 'none' ){
      div.show();
    }
    
    else{
      div.hide();
    }
  });

})

#foo{
  min-width: 35%;
}

#bar{
  max-width: 35%;
  min-height: 100px;
  background-color: aliceblue;
  border: 1px solid blue;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="foo">Toggle</button><br><br>
<div id="bar"></div>

I got an idea but it doesn´t work.

  $(document).on('click','html',function(e){
    if(e.eventTarget !== 'foo'){
      $('#bar').hide();
    }
  });

I got 2 issues, if the selector is html, the page will not answer, and the code in, is just to show what I'm trying to get.

Possible duplicate of [jQuery click() event catch-all?](https://stackoverflow.com/questions/3761902/jquery-click-event-catch-all) — Mark, May 04 '18 at 04:20
Possible duplicate of [Close the hamburger menu when you click outside of container](https://stackoverflow.com/questions/45747546/close-the-hamburger-menu-when-you-click-outside-of-container) — crffty, May 04 '18 at 04:45

score 3 · Answer 1 · answered May 04 '18 at 04:18

No need for jQuery, you can simply test to see if .closest('#bar') exists:

const bar = document.querySelector('#bar');
let hidden = false;
document.body.addEventListener('click', (e) => {
  if (e.target.closest('#foo')) {
    console.log('clicked inside, returning');
    return;
  }
  console.log('clicked outside');
  bar.style.display = hidden ? 'block' : 'none';
  hidden = !hidden;
});

body {
  height: 200px;
}
#foo{
  min-width: 35%;
}

#bar{
  max-width: 35%;
  min-height: 100px;
  background-color: aliceblue;
  border: 1px solid blue;
  border-radius: 5px;
}

<button id="foo">Toggle</button>
<div id="bar"></div>

score 1 · Accepted Answer · 2018-05-04T04:50:43.150

You may have to consume events bubbling up to parent node.

$(function() {

  $('#foo').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('#bar').toggle();
    console.log('toggle ... bar');
  });

  $(document).on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('#bar').hide();
    console.log('hide ... bar');
  });
})

#foo {
  min-width: 35%;
}

#bar {
  max-width: 35%;
  min-height: 100px;
  background-color: aliceblue;
  border: 1px solid blue;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="foo">Toggle</button><br><br>
<div id="bar"></div>

Nick Tirrell · Answer 3 · 2018-05-04T04:32:47.340

This is the simplest approach.

    $(document).on("click",function() {
      if(event.target.id == 'foo') {
        //if #foo is clicked, do nothing
      }
      else {
         //if the button is not clicked
         $('#bar').hide();
      }
    });

#foo{
  min-width: 35%;
}

#bar{
  max-width: 35%;
  min-height: 100px;
  background-color: aliceblue;
  border: 1px solid blue;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="foo">Toggle</button><br><br>
<div id="bar"></div>

score 0 · Answer 4 · answered May 04 '18 at 04:27

I think it is better way to use focus and blur functions for that

Here is how I did

<button id="test">
  Hello
</button>

<div class="blue-container" tabindex="1">

</div>

The tabindex global attribute indicates if its element can be focused

$('#test').focus(function () {
    $('.blue-container').show().focus();
});

$('.blue-container').blur(function () {
    $('.blue-container').hide();
});

Trigger event if click outside selector

4 Answers4