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

only_do 發(fā)布于2019-08-29 16:23 / 3134人閱讀

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

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

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

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

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

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

//設(shè)置了tabindex后，元素默認(rèn)加虛線，通過(guò)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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

Backache 2019-08-23 10:59 評(píng)論0 收藏0
DIV的失去焦點(diǎn)(blur)實(shí)現(xiàn)

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

sihai 2019-08-02 11:15 評(píng)論0 收藏0
JavaScript 事件——“事件類型”中“焦點(diǎn)、鼠標(biāo)和滾輪事件”的注意要點(diǎn)

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

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

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

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

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

e10101 2019-08-28 18:21 評(píng)論0 收藏0