DIV的失去焦點(blur)實現(xiàn)方法

來源：本站原創(chuàng)|時間：2020-01-10|欄目：CSS/HTML|點擊：次

用防抖實現(xiàn)DIV鼠標移出消失

由于div標簽本身不支持onblur事件，所以對于點擊一個按鈕彈出的div，我們想要當這個div失去焦點的時候，讓它消失不能使用的onblur來實現(xiàn)。

但是可以利用onmouseout和事件來實現(xiàn)DIV失去焦點消失的功能。直接使用onmouseout來實現(xiàn)移出消失可能會有一個問題：假設你的按鈕的位置和彈出的div的位置不是重合的那么會導致鼠標移動就會馬上去觸發(fā)onmouseout事件,從而沒什么卵用。

利用防抖、onmouseout、onmouseover組合來實現(xiàn)一個體驗很好的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);
        }
    }

然后無意中發(fā)現(xiàn)一個可以通過給div添加tabindex屬性，從而實現(xiàn)blur事件，所以上面的代碼可能是白寫了。(PS 我感覺上面的體驗會好一些，減少了很多誤觸)

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。

上一篇：html文本溢出顯示省略字符的兩種常用解決方法

欄目：CSS/HTML

下一篇：html頁面中完成查找功能

本文標題：DIV的失去焦點(blur)實現(xiàn)方法

本文地址：http://www.jygsgssxh.com/a1/CSS_HTML/9520.html

更多CSS/HTML

雷火电竞-中国电竞赛事及体育赛事平台

CSS/HTML

DIV的失去焦點(blur)實現(xiàn)方法

您可能感興趣的文章

閱讀排行

本欄相關

隨機閱讀