用防手震實現DIV滑鼠移出消失
由於div標籤本身不支援onblur事件,所以對於點擊一個按鈕彈出的div,我們想要當這個div失去焦點的時候,讓它消失不能使用的onblur來實現。
但可以利用onmouseout和事件來實現DIV失去焦點消失的功能。直接使用onmouseout來實現移出消失可能會有一個問題:假設你的按鈕的位置和彈出的div的位置不是重合的那麼會導致滑鼠移動就會馬上去觸發onmouseout事件,從而沒什麼卵用。
利用防手震、onmouseout、onmouseover組合來實現一個體驗很好的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); } }
然後無意中發現一個可以透過為div添加tabindex屬性,從而實現blur事件,所以上面的程式碼可能是白寫了。 (PS 我覺得上面的體驗會好一些,減少了很多誤觸)
//設定了tabindex後,元素預設加虛線,透過ouline=0進行移除(IE設定hidefocus=true)<div tabindex=0 outline=0 hidefocus=true></div>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。