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

來源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：CSS/HTML|點(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來實(shí)現(xiàn)。

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

利用防抖、onmouseout、onmouseover組合來實(shí)現(xiàn)一個(gè)體驗(yàn)很好的blur事件

    /**
     *鼠標(biāo)移動(dòng)過div事件
     */
    function moveOverEvent(ele,outTimer) {
        let overTimer = null;
        return function(){
            clearTimeout(outTimer);     //div沒有消失的情況下，在移動(dòng)進(jìn)來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);
        }
    }

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

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

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

欄目：CSS/HTML

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

本文標(biāo)題：DIV的失去焦點(diǎn)(blur)實(shí)現(xiàn)方法

本文地址：http://mengdiqiu.com.cn/a1/CSS_HTML/9520.html

更多CSS/HTML

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

CSS/HTML

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

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀