Javascript常见问题及解决（一）div失去焦点后隐藏

描述：div失去焦点后隐藏

根节点document/body添加点击监听事件，利用e.target属性判断其所有的祖先元素中是否包含该div元素及出发该下拉框内的元素，若不包含，则隐藏
1）e的属性很多，总结如下
属性名说明currentTarget冒泡前的当前事件的Dom对象,等同于thisdata事件调用时传递的数据result上一个事件处理函数返回的值target获取事件触发者的Dom对象timeStamp事件发生的时间戳type事件类型详细戳这里

2）祖先元素获取方法parents()

3）选择出具有某个特性的元素filter（'条件'）
详细戳这里

html：

    <li class="">        <div class="authorName">            <a class="nameText hover">Agustín G. Martinelli</a>            <a class="email"><img src="img/icon/email.png"/></a>            <!--<span class="email"></span>-->        </div>        <div class="authorInfo" id="authorInfo0" tabindex="-1">            <p>                <span class="type">Email</span>                <a href="[e-mail]">[e-mail]</a>            </p>            <!--段落分隔符-->            <hr/>            <p>                <span class="type">Affilication</span>                Unit for Basic and Applied Microbiology, School of Natural Sciences, Autonomous University                of Queretaro, Queretaro, Mexico, The Marine Mammal Center, Sausalito, California, United                States of American            </p>            <!--段落分隔符-->            <hr/>            <p>                <span class="type">ORCID</span>                <a href="http://orcid.org/0000-0001-8954-8782">http://orcid.org/0000-0001-8954-8782</a>            </p>            <a class="close">x</a>        </div>    </li>

js：

//当下拉框失去焦点时，关闭$('body').click(function (e) {    // 触发该事件的直接元素    var type = e.target;    // 点击其他地方，悬浮框失去焦点隐藏,3种情况    // 1、点击的不是作者名称；2、点击的不是悬浮框；3、点击的直接元素不是悬浮框内某一个子元素    // alert($(e.target).parents().filter('.authorInfo').length);    if((type.className != "nameText")        && (type.className != "authorInfo")        && ($(e.target).parents().filter('.authorInfo').length == 0)){        $('.authorInfo').hide();        $('#topAuthor li').removeClass('active');    }});

html：