javascript - jQuery 点击事件 : check if element is within parent div

Question

我正在尝试编写一个 click 函数来检查 e.target 是否包含在父元素中。我尝试使用 .not() 从另一个 $(document).click 函数中排除该元素，该函数导致了一些不希望的行为，但这没有用.我也尝试使用 .contains(child,parent) 但效果不佳，因为它要求子元素不是 jQuery 或 JavaScript 对象。我的情况很复杂，因为我的父元素内有多个级别，而在其外部还有更多级别。

这大概是我想做的:

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

这是我渲染的 HTML:

<div class="dropdown">
    <button class="j-descrip-button thin job-dropdown-link" menu="refer">Refer A 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 an awesome friend!</b>
                </div>
                <div class="form-group">
                    <label for="user_full_name">Your Name</label>  <!-- is this the best way to do 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 for 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 to My Friend(s)">
            </form>
        </div>
    </div>
</div>

Answer 1

使用find

$(document).click(function(e) {
    if($('.dropdown-menu').find($(e.target))) {
        e.stopPropagation();
    } else {
        $('.dropdown-menu').hide();
    }
});

我认为你可以使用$(e.target) 或e.target，没有区别。