0

tenho uma função JS que apresenta banners na minha página caso seja o primeiro acesso do dia. Nesse popup tem um input para a pessoa entrar com o email dela, porém ao clicar no input, todo o pop desaparece (na verdade essa é a intenção, menos para o input, que deveria receber o email do usuário).

Utilizo esse código, será que da pra aplicar algo aqui para bloquear o evento click no input?

jQuery(document).on('click','#black-courtain', function(e) {
  e.preventDefault();
  jQuery('input[name=EMAIL]').click(false);
  console.log(jQuery('input[name=EMAIL]').click(false));
  jQuery(this).hide(); });

3 Respostas 3

1

A maneira mais simples que consigo enxergar é simplesmente, no processador do evento, verificar se o clique foi no campo de email e só esconder nesse caso:

jQuery(document).on('click', '#black-curtain', function (e) {
  if (e.target.tagName !== 'INPUT' || e.target.name !== 'EMAIL') {
    e.preventDefault();
    jQuery(this).hide();
  }
}

Será que isto te atende?

1
  • amigo, muito obrigado, sua solução não só resolveu a questão como também me ajudou a entender novas formas de codar com jquery. Valeu mesmo cara!
    – thierry
    Commented 6/02/2017 às 14:28
0

Já tentou retornar false na função de callback do evento click? assim:

jQuery('input[name=EMAIL]').click(function () {
  return false;
});
0
 $('body').on('click', function (e) {

    if (e.target.id === 'black-courtain') { 

        $('#black-courtain, .popUP').hide();

    }

  });

Isso vai esconder a cortina e o popup, sempre que o usuário clicar na cortina, ou seja, fora do popup que estiver aparecendo. Assim não precisa se preocupar onde ele clica.

Segue Snippet para exemplificar:

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

     if (e.target.id === 'black-courtain') { 
          
      $('#black-courtain, .popUP').hide();
     
     }

});
#black-courtain {
    background-color: #000;
    opacity:0.5;
    z-index: 100;
    width: 450px;
    height: 450px;
    position: fixed;
    top: 50%; left: 50%;
   margin: -125px 0 0 -225px;
    }

    .popUP {
    z-index: 101;
    background-color: #b6ff00;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%; left: 50%;
    margin: -50px 0 0 -50px;
    }

input {width: 70px; margin: 2px 0}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="black-courtain"></div>

<div class="popUP">
  TEXTO 
  <br />
  <input type="text" value="" />
  <br /><input type="button" value="botão" />
</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 .