用防抖實現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> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林站長站。
新聞熱點
疑難解答
圖片精選
