let dropdown menu disappear if I click outside

Question

I have this search box search box

And I've written a function to let the search box disappear when the user clicks outside or presses the Esc button.

The problem is, that when the user clicks on the search field, then search button "Suchen" in the menu does not disappear.

after search

My code:

//Outside click
$("body").click(function(){
    jQuery('.searchfieldbox').fadeOut(500);
});
$("body").keydown(function(e){
    if(e.keyCode === 27 || e.which === 27 ){
        jQuery('.searchfieldbox').fadeOut(500);
    }
});
$(".pg-suche-lupe-button").click(function(e){
    e.stopPropagation();
});

How can solve this problem ???

Answer 1

Try to make use of $(e.target).hasClass on the body click.

Stack Snippet

 $("body").click(function(e) { if (!$(e.target).hasClass("searchfieldbox")) { jQuery('.searchfieldbox').fadeOut(500); } }); $("#input").click(function(e) { e.stopPropagation(); jQuery('.searchfieldbox').fadeIn(500); }); $("body").keydown(function(e) { if (e.keyCode === 27 || e.which === 27) { jQuery('.searchfieldbox').fadeOut(500); } }); 

 .searchfieldbox { height: 100px; background: #ccc; width: 100px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="input"> <div class="searchfieldbox"></div>