CODEWITHSUNDEEP
javascriptjquery
Alberto Siurob
Alberto Siurob

Reputation: 227

Trigger event if click outside selector

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.

Upvotes: 2

Views: 1728

Answers (4)

user2575725
user2575725

Reputation:

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>

Upvotes: 1

Nick Tirrell
Nick Tirrell

Reputation: 431

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>

Upvotes: 0

Iris
Iris

Reputation: 1476

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();
});

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370689

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>

Upvotes: 4

Related Questions