close div by clicking outside it

Question

I have a div with a botão inside to close it. At first, she’s with display: none, but to the click on on one button on another div, she turns into display: block.

I need to find a way to when she is display: block, and if by incident click on in anything other than div (or inside the div), then, a click is triggered on the button that the closeness.

I tried following code:

$(document).on('click', function(e) {       

    alert($("div.peca").css("display"));  //retorna none

    if ( $("div.peca").css("display") === "block" ) {

          alert($("div.peca").css("display"));  //retorna block

          $("div.peca button.fechaPeca").trigger("click");

    }  

});

But when I click on the button that makes it display: block, Already comes that she is display: block and then ends up closing automatic.

What to do in this case?

I know that the error is in this line:

$("div.peca button.fechaPeca").trigger("click");

'Cause I mentioned it and I put one alert in place and worked.

I also tried to:

  $("div.peca button.fechaPeca").click();

Same thing.

But no idea why this error is occurring. That is, the botões stop accepting click

Another text I wrote was

$(".fechaPeca").on("click", function() {

    $("div.pecaGas").css("display","block");
    $("div.peca").css("display","none");

})

replaced by

$(".fechaPeca").on("click", function() {

        alert();

})

The alert() worked.

But,

    $("div.pecaGas").css("display","block");
    $("div.peca").css("display","none");

It doesn’t work when I access

    $(".fechaPeca").on("click"

Through another click

Answer 1

You can use the e.target to know which element is clicked and whether it is inside the element you are looking for.

You can use the e.target.closest(seletor) that climbs the DOM until finding a seletor CSS. If you do not find it you know it is outside that element. Or you can have an element and use the el.includes(e.target) that tells you if a given element has inside the e.target.

For example:

$(document).on('click', function(e) {
  var dentroPeca = e.target.closest('.peca');
  console.log(dentroPeca ? 'Dentro!' : 'Fora!');
});

div.peca,
div.outra {
  padding: 20px;
  border: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="peca">
  <p>Peça</p>
</div>

<div class="outra">Outra</div>

---

After seeing the site you mentioned in the comments I believe that what you are looking for is something like this: http://jsfiddle.net/Sergio_fiddle/0sjc49jf/2/

But the problem you had with the code is that when you click .encomende this also triggers the $(document).on('click', function(e) { and like this .encomende is not inside e.target.closest('div.peca') end up creating a closed circle where the div.peca opens and closes immediately.

In other words:

When you click on that side button the one that runs first is $(".encomende").on("click", there div.peca is visible. It is then called $(document).on('click' who finds the div.peca visible and hide it again via .trigger() that works. Changes the if (dentro == null) for if (dentro == null && !e.target.classList.contains('encomende')).

That is, adding the condition !e.target.classList.contains('encomende') you ensure that the .trigger("click") will not be run if e.target clicked has the class encomende.

Answer 2

Can do in the following scheme:

Include in this selector below the elements that you do not want to close to div when clicked (change class .botaoAbrir by the class of the element that opens the div):

$(".botaoAbrir, div.peca, div.peca button.fechaPeca").on('click',function(e){
    e.stopPropagation();
});

And add a listener that will close to div (if it is visible) when clicking anywhere on the page, except the selectors included in the listener above:

$(document).on('click',function(){
    $("div.peca button.fechaPeca").trigger("click");
});

Testing:

$(document).on('click',function(){
	$("div.peca button.fechaPeca").trigger("click");
});

$(".botaoAbrir, div.peca, div.peca button.fechaPeca").on('click',function(e){
	e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="peca" style="padding: 20px; color: #fff; display: none; text-align: center; float: left; width: 300px; height: 200px; background: red;">
  Clique fora do box vermelho ou no botão "Fechar" para fechar o box.
  <br />
  <br />
	<button class="fechaPeca" onclick="$('div.peca').hide()">Fechar</button>
</div>

<div>
	<button class="botaoAbrir" onclick="$('div.peca').show()">Abrir</button>
</div>