DIV的失去焦点(blur)实现

最新推荐文章于 2024-08-04 18:23:42 发布

转载最新推荐文章于 2024-08-04 18:23:42 发布 · 4.3k 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015980289

文章标签：

#javascript #前端 #ViewUI

本文介绍了一种利用防抖技术结合onmouseout和onmouseover事件，实现DIV标签失去焦点后优雅消失的方法，并附带介绍了通过设置tabindex属性来触发blur事件的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用防抖实现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>