DIV的失去焦点（blur）实现⽅法
⽤防抖实现DIV⿏标移出消失
由于div标签本⾝不⽀持onblur事件，所以对于点击⼀个按钮弹出的div，我们想要当这个div失去焦点的时候，让它消失不能使⽤的onblur来实现。
但是可以利⽤onmouseout和事件来实现DIV失去焦点消失的功能。直接使⽤onmouseout来实现移出消失可能会有⼀个问题：假设你的按钮的位置和弹出的div的位置不是重合的那么会导致⿏标移动就会马上去触发onmouseout事件，从⽽没什么卵⽤。
利⽤防抖、onmouseout、onmouseover组合来实现⼀个体验很好的blur事件
/**
*⿏标移动过div事件
*/
function moveOverEvent(ele,outTimer) {
onblur和blur的区别
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>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。