DIV的失去焦点(blur)实现方法

冬寒风

用防抖实现DIV鼠标移出消失
由于div标签本身不支持onblur事件，所以对于点击一个按钮弹出的div，我们想要当这个div失去焦点的时候，让它消失不能使用的onblur来实现。
但是可以利用onmouseout和事件来实现DIV失去焦点消失的功能。直接使用onmouseout来实现移出消失可能会有一个问题：假设你的按钮的位置和弹出的div的位置不是重合的那么会导致鼠标移动就会马上去触发onmouseout事件,从而没什么卵用。
利用防抖、onmouseout、onmouseover组合来实现一个体验很好的blur事件

1.     /**
   
2.      *鼠标移动过div事件
   
3.      */
   
4.     function moveOverEvent(ele,outTimer) {
   
5.         let overTimer = null;
   
6.         return function(){
   
7.             clearTimeout(outTimer);     //div没有消失的情况下，在移动进来div，那么就清除上次移出的事件
   
8.             clearTimeout(overTimer);    //防抖
   
9.             overTimer = setTimeout(()=>{        
   
10.                 ele.style.display = "block";
    
11.             },500);                     
    
12.         }
    
13.     }
    
14.     /**
    
15.      * 鼠标移出
    
16.      */
    
17.     function moveOutEvent(ele,outTimer) {
    
18.         return function(){
    
19.             clearTimeout(outTimer);         //防抖
    
20.             outTimer = setTimeout(()=>{     //移动出去后等500ms，在消失这div
    
21.                 ele.style.display = "none";
    
22.             },500);
    
23.         }
    
24.     }

复制代码

然后无意中发现一个可以通过给div添加tabindex属性，从而实现blur事件，所以上面的代码可能是白写了。(PS 我感觉上面的体验会好一些，减少了很多误触)

1. //设置了tabindex后，元素默认加虚线，通过ouline=0进行去除(IE设置hidefocus="true")
   
2. <div tabindex="0" outline=0" hidefocus="true"></div>

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

中国大爷llg

好用好用

余生只为梦想

我不确定这个信息的准确性，请再确认一下

是的撒

同意！

不冈页汤腹盎

我们一起努力，共同解决问题吧。

67854287

友善的讨论氛围是非常重要的。

翰抗返形沃实

说得太好了，完全同意！

你猜猜看baby

我不确定这个信息的准确性，请再确认一下

一个人de世界

我不太确定，可能需要再确认一下。

清河桥士

友善的讨论氛围是非常重要的。