How to hide a block by clicking on yourself? In this case, by clicking on the child function should not work.
Prepared a small code. Maybe there is some method that allows you to turn off the function if we do not specifically click on the element itself?

$(".parent").click(function() { $(this).css('display', 'none'); }); 
 .parent { display: block; position: relative; width: 100px; height: 100px; padding: 25px; background: #FFC107; } .schild { display: block; position: relative; width: 100%; height: 100%; background: #512DA8; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="parent"> <div class="schild"> </div> </div>

    2 answers 2

    You just need to check the goal of the click with the help of event.target .
    If this is the desired block, then process the click. No - skip it.

    Here is your corrected example.

     $(".parent").click(function(event) { if ($(event.target).hasClass('parent')) { $(this).css('display', 'none'); } }); 
     .parent { display: block; position: relative; width: 100px; height: 100px; padding: 25px; background: #FFC107; } .schild { display: block; position: relative; width: 100%; height: 100%; background: #512DA8; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="parent"> <div class="schild"> </div> </div>

      Option, a little shorter ...

       $(".parent").click(function(event) { event.target == this && $(this).css('display', 'none'); }); 
       .parent { display: block; position: relative; width: 100px; height: 100px; padding: 25px; background: #FFC107; } .schild { display: block; position: relative; width: 100%; height: 100%; background: #512DA8; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="parent"> <div class="schild"> </div> </div>