在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');
        }
    });