javascript - jQuery click event: check if element is within parent div -

i'm trying write click function checks if e.target contained parent element. i've tried using .not() exclude element $(document).click function causing un desired behavior, didn't work. tried using .contains(child,parent) doesn't work because requires child element not jquery or javascript object. case complicated because there several levels within parent element , many more outside it.

here want do:

$(document).click(function(e) {     if($.contains($('.dropdown-menu'),$(e.target)) {         e.stoppropagation();     } else {         $('.dropdown-menu').hide();     } }); 

here rendered html:

<div class="dropdown">     <button class="j-descrip-button thin job-dropdown-link" menu="refer">refer friend</button>     <div class="dropdown-menu right refer-menu" style="display:none;">         <div class="dd_arrow">         </div>         <div class="refer-dropdown-content">             <form accept-charset="utf-8" action="/send_refer_a_friend_email" html="{:role=>&quot;form&quot;}" method="post" class="ng-pristine ng-valid">                 <div style="margin:0;padding:0;display:inline">                     <input name="utf8" type="hidden" value="✓">                     <input name="authenticity_token" type="hidden" value="{{authenticity_token}}">                 </div>                 <div class="form-group" style="display: none;">                     <label for="company_name">company name</label>                     <input class="form-control" id="company_name" name="company_name" type="text" value="{{j.company_name}}">                 </div>                 <div class="form-group" style="display:none;">                     <label for="job_title">job title</label>                     <input id="job_title" name="job_title" value="python developer" type="text" class="form-control">                 </div>                 <div style="font-size: 20px; margin-bottom: 10px;">                     <b>you're awesome friend!</b>                 </div>                 <div class="form-group">                     <label for="user_full_name">your name</label>  <!-- best way this? -->                     <div>                         <input class="refer-text-field" id="user_full_name" name="user_full_name" type="text" value="{{current_user_name}}">                     </div>                 </div>                 <div class="form-group">                     <span>                         <label for="friend_email">your friend's email</label>                         <em style="font-size: 10px;">use commas multiple emails</em>                     </span>                     <div>                         <input class="refer-text-field" id="friend_email" name="friend_email" type="text">                     </div>                 </div>                 <div class="prof-link" style="display: none;">                     <label for="prof_link">profile link</label>                     <input class="form-control" id="prof_link" name="prof_link" type="text" value="{{profile_link}}">                 </div>                 <input class="refer-submit-btn" name="commit" type="submit" value="send friend(s)">             </form>         </div>     </div> </div> 

you can use parent function this, since child of something, can check see if or not in body tags:

$('button').click(function(){     var x = $(this).parent();     if (!x.is('body')) {         console.log("it has it!");     } else {         console.log("it not have it!");     } }); 

here working example: http://jsfiddle.net/5cjp47c7/

or if know parent class or id name can use this:

if ( $(".child-element").parents("#main-nav").length == 1 ) {      // yes, child element inside parent  } else {     // no, not inside  }