点击元素之外的位置关闭弹窗

点击元素之外的位置关闭弹窗

html

<dd>
    <span class="sel_span">项目</span>
    <input type="hidden" class="index_form_xm" value="">
    <div class="index_form_sel">
        <div class="index_form_ul">
            <div class="index_form_li" data-val="项目A">项目A</div>
            <div class="index_form_li" data-val="项目b">项目b</div>
            <div class="index_form_li" data-val="项目c">项目c</div>
            <div class="index_form_li" data-val="项目d">项目d</div>
            <div class="index_form_li" data-val="项目e">项目e</div>
            <div class="index_form_li" data-val="项目f">项目f</div>
            <div class="index_form_li" data-val="项目g">项目g</div>
            <div class="index_form_li" data-val="项目A">项目A</div>
            <div class="index_form_li" data-val="项目b">项目b</div>
            <div class="index_form_li" data-val="项目c">项目c</div>
            <div class="index_form_li" data-val="项目d">项目d</div>
            <div class="index_form_li" data-val="项目e">项目e</div>
            <div class="index_form_li" data-val="项目f">项目f</div>
            <div class="index_form_li" data-val="项目g">项目g</div>
        </div>
    </div>
</dd>

js

$(document).on('click',function (e) {
    console.log(e.target)
    if ($(e.target).closest('.sel_span').length > 0) {

        // alert('弹出框内部被点击了');

    } else {

        // alert('弹出框以外的部分被点击了');

        // 关闭弹框
        $('.index_form_sel').hide();

    }
});