单击背景div时关闭div

Question

I want to close a Div when i click on the Background div(SearchBlur). My problem is if i click on the shown div it closes also.

here is my javascrip code

SearchBlur.addEventListener('click', closePopup);

function closePopup(){

   if(counter == 1){
        $( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
        $('.SearchBlur').fadeOut("normal");
        counter = 0;
    }

}

here my html

<div class="SearchBlur" id="SB_Back">
    <div class="div_container" id="container">
        <div class="grid_div">
            <div id="gridwrapper">
            </div>
        </div>
    </div>
</div>

the Programm looks like this

i want to close the popup wehn i click on the dark background

sorry for my bad english :D

Answer 1

尝试使用以下代码将侦听器添加到子div中

event.stopPropagation();

Answer 2

Use event.stopPropagation(); onclick the child you want

 var counter = 1; $( ".SearchBlur" ).on( "click", function() { if(counter == 1){ $( "#search_input" ).animate({ "left": "-300px"}, "normal" ); $('.SearchBlur').fadeOut("normal"); counter = 0; } }); $( ".div_container" ).on( "click", function() { event.stopPropagation(); }); 

 .SearchBlur{ background:blue; } .div_container{ width:100px; background:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="SearchBlur" id="SB_Back"> <div class="div_container" id="container"> <div class="grid_div"> <div id="gridwrapper">div_container </div> </div> </div> </div> 

Answer 3

Which div are you trying to close?

From what I can see, you're fading out the highest level div, so all markup nested within SearchBlur will also be hidden. I assume you want to target a deeper nested div, for example:

function closePopup(){
   if(counter == 1){
        $( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
        $('.div_container').fadeOut("normal");
        counter = 0;
    }
}

Answer 4

In a simple way your html looks like:

<div class="blur">
    <div class="popup"></div>
</div>

Your JS is just like this:

$('.blur').on('click', function (e){
  if (e.target === this)
    $(this).fadeOut();
});

Here is codepen: https://codepen.io/alexmoronto/pen/xaKvxg