Javascript小知识点（五）：移动端控制点击别的地方，隐藏页面弹框

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/baizaozao/article/details/79643171

在PC端实现思路是这样的

• 为document添加点击事件
• 判断点击的参数 event.target中是否包含该弹框相关的div
• 如果包含，则不作任何操作
• 如果不包含，则直接设置该div隐藏
• 代码如下

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

问题来了

• 将这段代码直接在移动端使用，尤其是ios下，点击别的地方是没有效果的

原因

• ios的body，document等是不支持click事件的

解决

• body只接受内部的冒泡事件，点击按钮后触发了按钮的click事件，然后按钮会告诉自己的上级（body）：老大，我被点击了，
• body会说：好的，我会处理的，这时候弹窗就出来了。
• body里面的div，span等标签默认是不会理睬click事件公告的，但是我们可以开启他，开启后他们就跟按钮一样，可以接受click事件，并汇报给上级。
  

也就是说，将原来给body绑定的click事件，绑定到body下的所有子元素即可

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