4

Tenho uma div com um botão dentro para fechá-la. À principio, ela está com display: none, mas ao clicar em uma botão em outra div, ela se transforma em display: block.

Preciso arranjar uma forma de quando ela estiver display: block, e se por incidente clicar em qualquer outra coisa que não seja a div (ou dentro da div), então, um click é disparado no botão que a fecha.

Tentei seguinte código:

$(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");

    }  

});

Porém quando eu clico no botão que a torna display: block, já vem que ela está display: block e então acaba fechando automático.

O que fazer neste caso?

Sei que o erro está nessa linha:

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

Pois comentei-a e coloquei uma alert no lugar e funcionou.

Também tentei:

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

Mesma coisa.

Mas não ideia do porque está ocorrendo este erro. Ou seja, os botões param de aceitar click

Outro text que fiz foi

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

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

})

substitui por

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

        alert();

})

O alert() funcionou.

Mas,

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

Não funciona quando acesso o

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

Através de outro click

2 Respostas 2

1

Podes usar o e.target para saber qual o elemento clicado e se ele está dentro do elemento que procuras.

Podes usar o e.target.closest(seletor) que sobe no DOM até encontrar um seletor CSS. Se não encontrar sabes que está fora desse elemento. Ou então podes ter um elemento e usar o el.includes(e.target) que te diz se um dado elemento tem dentro o e.target.

Por exemplo:

$(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>


Depois de ver o site que referiste nos comentários creio que o que procuras é algo assim: http://jsfiddle.net/Sergio_fiddle/0sjc49jf/2/

Porém o problema que tinhas no código é que quando clicas em .encomende isso aciona também o $(document).on('click', function(e) { e como esse .encomende não está dentro de e.target.closest('div.peca') acabas por criar um circulo fechado onde a div.peca abre e fecha imediatamente.

Por outras palavras:

Quando clicas nesse botão lateral o que corre primeiro é $(".encomende").on("click", aí div.peca fica visível. Depois é chamado $(document).on('click' que encontra o div.peca visível e volta a escondê-lo via .trigger() que funciona. Muda o if (dentro == null) para if (dentro == null && !e.target.classList.contains('encomende')).

Ou seja, juntando a condição !e.target.classList.contains('encomende') garantes que o .trigger("click") não será corrido se e.target clicado tiver a classe encomende.

2
0

Pode fazer no seguinte esquema:

Inclua neste seletor abaixo os elementos que você não quer que feche a div quando clicados (troque a classe .botaoAbrir pela classe do elemento que abre a div):

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

E adicionar um escutador que irá fechar a div (se ela estiver visível) quando clicar em qualquer lugar da página, exceto os seletores incluídos no escutador acima:

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

Teste:

$(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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .