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

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

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

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

??由于div標簽本身不支持onblur事件，所以對于點擊一個按鈕彈出的div，我們想要當(dāng)這個div失去焦點的時候，讓它消失不能使用的onblur來實現(xiàn)。
??但是可以利用onmouseout和事件來實現(xiàn)DIV失去焦點消失的功能。直接使用onmouseout來實現(xiàn)移出消失可能會有一個問題：假設(shè)你的按鈕的位置和彈出的div的位置不是重合的那么會導(dǎo)致鼠標移動就會馬上去觸發(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 我感覺上面的體驗會好一些，減少了很多誤觸)

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

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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