用防抖實(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í)有所幫助，也希望大家多多支持腳本之家。
