DIV的失去焦點(diǎn)(blur)實(shí)現(xiàn)

sihai 發(fā)布于2019-08-02 11:15 / 1366人閱讀

摘要：用防抖實(shí)現(xiàn)鼠標(biāo)移出消失由于標(biāo)簽本身不支持事件，所以對于點(diǎn)擊一個按鈕彈出的，我們想要當(dāng)這個失去焦點(diǎn)的時候，讓它消失不能使用的來實(shí)現(xiàn)。但是可以利用和事件來實(shí)現(xiàn)失去焦點(diǎn)消失的功能。

用防抖實(shí)現(xiàn)DIV鼠標(biāo)移出消失

??由于div標(biāo)簽本身不支持onblur事件，所以對于點(diǎn)擊一個按鈕彈出的div，我們想要當(dāng)這個div失去焦點(diǎn)的時候，讓它消失不能使用的onblur來實(shí)現(xiàn)。
??但是可以利用onmouseout和事件來實(shí)現(xiàn)DIV失去焦點(diǎn)消失的功能。直接使用onmouseout來實(shí)現(xiàn)移出消失可能會有一個問題：假設(shè)你的按鈕的位置和彈出的div的位置不是重合的那么會導(dǎo)致鼠標(biāo)移動就會馬上去觸發(fā)onmouseout事件,從而沒什么卵用。
??利用防抖、onmouseout、onmouseover組合來實(shí)現(xiàn)一個體驗(yàn)很好的blur事件

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

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

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

//設(shè)置了tabindex后，元素默認(rèn)加虛線，通過ouline=0進(jìn)行去除(IE設(shè)置hidefocus="true")

GPU云服務(wù)器云服務(wù)器 bootstrap失去焦點(diǎn) html表單失去焦點(diǎn) js失去焦點(diǎn)事件 php 失去焦點(diǎn)事件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52866.html

相關(guān)文章

DIV的失去焦點(diǎn)(blur)實(shí)現(xiàn)

摘要：用防抖實(shí)現(xiàn)鼠標(biāo)移出消失由于標(biāo)簽本身不支持事件，所以對于點(diǎn)擊一個按鈕彈出的，我們想要當(dāng)這個失去焦點(diǎn)的時候，讓它消失不能使用的來實(shí)現(xiàn)。但是可以利用和事件來實(shí)現(xiàn)失去焦點(diǎn)消失的功能。用防抖實(shí)現(xiàn)DIV鼠標(biāo)移出消失 ??由于div標(biāo)簽本身不支持onblur事件，所以對于點(diǎn)擊一個按鈕彈出的div，我們想要當(dāng)這個div失去焦點(diǎn)的時候，讓它消失不能使用的onblur來實(shí)現(xiàn)。??但是可以利用onmous...

only_do 2019-08-29 16:23 評論0 收藏0
DIV的失去焦點(diǎn)(blur)實(shí)現(xiàn)

摘要：用防抖實(shí)現(xiàn)鼠標(biāo)移出消失由于標(biāo)簽本身不支持事件，所以對于點(diǎn)擊一個按鈕彈出的，我們想要當(dāng)這個失去焦點(diǎn)的時候，讓它消失不能使用的來實(shí)現(xiàn)。但是可以利用和事件來實(shí)現(xiàn)失去焦點(diǎn)消失的功能。用防抖實(shí)現(xiàn)DIV鼠標(biāo)移出消失 ??由于div標(biāo)簽本身不支持onblur事件，所以對于點(diǎn)擊一個按鈕彈出的div，我們想要當(dāng)這個div失去焦點(diǎn)的時候，讓它消失不能使用的onblur來實(shí)現(xiàn)。??但是可以利用onmous...

Backache 2019-08-23 10:59 評論0 收藏0
JavaScript 事件——“事件類型”中“焦點(diǎn)、鼠標(biāo)和滾輪事件”的注意要點(diǎn)

摘要：焦點(diǎn)事件一般利用這些事件與方法和屬性配合。此外，支持一個名為的類似事件，也是在鼠標(biāo)滾動滾輪時除法。焦點(diǎn)事件一般利用這些事件與document.hasFocus()方法和document.activeElement屬性配合。主要有： blur：元素失去焦點(diǎn)，不會冒泡； DOMFocusIn：同HTML事件focus，于DOM3遭廢棄，選用focusin； DOMFocusOut：同...

clasnake 2019-08-19 17:23 評論0 收藏0
實(shí)現(xiàn)"輸入框"獲得焦點(diǎn)時外邊框變藍(lán)

摘要：背景之前做了一個網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時外邊框不變藍(lán)。而且輸入框的邊框設(shè)置在了父元素上，所有當(dāng)輸入框獲得焦點(diǎn)時，看到的應(yīng)該是父元素上的邊框變藍(lán)，而不是里面的的邊框變藍(lán)。背景之前做了一個網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時外邊框不變藍(lán)。突然某一天，產(chǎn)品覺得這樣用戶體驗(yàn)不好，不能很明顯地告訴用戶當(dāng)前鼠標(biāo)停在哪里，于是要求改為當(dāng)輸入框獲得鼠標(biāo)焦點(diǎn)時，外...

Coding01 2019-08-21 10:44 評論0 收藏0
實(shí)現(xiàn)"輸入框"獲得焦點(diǎn)時外邊框變藍(lán)

摘要：背景之前做了一個網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時外邊框不變藍(lán)。而且輸入框的邊框設(shè)置在了父元素上，所有當(dāng)輸入框獲得焦點(diǎn)時，看到的應(yīng)該是父元素上的邊框變藍(lán)，而不是里面的的邊框變藍(lán)。背景之前做了一個網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時外邊框不變藍(lán)。突然某一天，產(chǎn)品覺得這樣用戶體驗(yàn)不好，不能很明顯地告訴用戶當(dāng)前鼠標(biāo)停在哪里，于是要求改為當(dāng)輸入框獲得鼠標(biāo)焦點(diǎn)時，外...

e10101 2019-08-28 18:21 評論0 收藏0