用防抖完成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>