Se você programa em Javascript, provavelmente já encontrou a situação em que deseja ter menus que se abrem com um clique e que se fecham quando o usuário clica fora do menu. Eu desenvolvi uma maneira bastante simples de fazer exatamente isso. Eu adiciono um ouvinte de evento ao corpo do documento. Quando alguém clica nele, procuramos o ID de destino do evento. Se corresponder ao ID da div da caixa, não faça nada. Caso contrário, feche o menu.
Levando isso um pouco mais longe, é ineficiente deixar um ouvinte de evento de clique em todo o corpo quando ele não estiver sendo usado. Nesse caso, se o menu ainda não foi aberto, não há motivo para ouvir um clique fora do menu. Adicione o ouvinte de evento no retorno de chamada da div que está sendo mostrada. Na mesma linha, quando a div estiver sendo ocultada novamente, remova o ouvinte de evento.
Show Div Clique dentro da caixa preta, nada acontece. Clique fora, ele desaparece $ ('# showbox'). Click (function () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('clique', boxCloser, false);}) ;}); função boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('clique', boxCloser, false); $ ('# bigbox'). hide (); }}
Além disso, certifique-se de incluir o jQuery em seu projeto, pois algumas das funcionalidades acima usam essa biblioteca.
