Lock event click on element

Question

Lock event click on element

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have a JS function that displays banners on my page if it is the first access of the day. In that popup there is an input for the person to enter with the email of it, but when clicking on the input, all the pop disappears (in fact this is the intention, less for the input, that should receive the user's email).

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

javascript jquery eventos eventos-do-mouse

asked by anonymous 06.02.2017 / 14:32

3 answers

Link images to category Error accessing local variable in anonymous class

score 1 · Answer 1

The simplest way I can see is simply, in the event handler, 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?

score 0 · Answer 2

0

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

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

06.02.2017 / 14:57

score 0 · Answer 3

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

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

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

    }

  });

This will hide the curtain and popup, whenever the user clicks on the curtain, that is, outside the popup that is appearing. So you do not have to worry where it 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><divid="black-courtain"></div>

<div class="popUP">
  TEXTO 
  <br />
  <input type="text" value="" />
  <br /><input type="button" value="botão" />
</div>