DIV的失去焦點(blur)實現

葉子二號發表於2019-02-16

用防抖實現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>

相關文章