Block event click element

Question

I have a JS function that displays banners on my page if it is the first access of the day. In this popup there is an input for the person to enter their email, but when clicking on the input, the whole pop disappears (actually this is the intention, except for the input, which should receive the user’s email).

I use this code, You can apply something here to block the event click 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(); });

Answer 1

The simplest way I can see is simply, in the event processor, check if the click was in the email field and only hide in this case:

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

Does this suit you?

Answer 2

Have you tried to return false in the callback function of the click event? like this:

jQuery('input[name=EMAIL]').click(function () {
  return false;
});

Answer 3

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

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

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

    }

  });

This will hide the curtain and the popup whenever the user clicks on the curtain, that is, outside the popup that is appearing. So you don’t have to worry about where he clicks.

Follow Snippet to illustrate:

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