脚本宝典收集整理的这篇文章主要介绍了DIV的失去焦点(blur)实现方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
由于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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的DIV的失去焦点(blur)实现方法全部内容，希望文章能够帮你解决DIV的失去焦点(blur)实现方法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。