DIV的失去焦點(blur)實現

用防抖實現DIV鼠標移出消失

  因爲div標籤自己不支持onblur事件，因此對於點擊一個按鈕彈出的div，咱們想要當這個div失去焦點的時候，讓它消失不能使用的onblur來實現。
  可是能夠利用onmouseout和事件來實現DIV失去焦點消失的功能。直接使用onmouseout來實現移出消失可能會有一個問題：假設你的按鈕的位置和彈出的div的位置不是重合的那麼會致使鼠標移動就會立刻去觸發onmouseout事件,從而沒什麼卵用。
  利用防抖、onmouseout、onmouseover組合來實現一個體驗很好的blur事件

/**
     *鼠標移動過div事件
     */
    function moveOverEvent(ele,outTimer) {
        let overTimer = null;
        return function(){
            clearTimeout(outTimer);     //div沒有消失的狀況下，在移動進來div，那麼就清除上次移出的事件
            clearTimeout(overTimer);    //防抖
            overTimer = setTimeout(()=>{        
                ele.style.display = "block";
            },500);                     
        }
    }

/**
     * 鼠標移出
     */
    function moveOutEvent(ele,outTimer) {
        return function(){
            clearTimeout(outTimer);         //防抖
            outTimer = setTimeout(()=>{     //移動出去後等500ms，在消失這div
                ele.style.display = "none";
            },500);
        }
    }

  而後無心中發現一個能夠經過給div添加tabindex屬性，從而實現blur事件，因此上面的代碼多是白寫了。(PS 我感受上面的體驗會好一些，減小了不少誤觸)

//設置了tabindex後，元素默認加虛線，經過ouline=0進行去除(IE設置hidefocus="true")
<div tabindex="0" outline=0" hidefocus="true"></div>