这篇文章主要介绍了DIV的失去焦点(blur)实现方法,用防抖实现DIV鼠标移出消失,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
后网红时代 如何捕捉下一个流量风口?

后网红时代 如何捕捉

近两年,有越来越多的国际大品牌开始向国内红人伸出橄榄
美最高法(tian)院(ping)拒绝审理Yelp平台内诽谤性评论案件

美最高法(tian)院(ping)拒绝审理Ye

美国最高法(tian)院(ping)已拒绝审理有关Yelp是否有责任从其网站上
Gmail上线撤销按钮:撰写邮件时不怕意外删除内容

Gmail上线撤销按钮:撰

Gmail在撰写邮件页面新增了撤销/重做按钮,所以下次用户
微软新专利:下一代Surface设备键盘可能含触觉反馈

微软新专利:下一代Surf

最近公开的一份微软最新专利显示,微软正在设想如何改进
搜索引擎百度已死作者:不要将文章和股价下跌相联系

搜索引擎百度已死作者

《搜索引擎百度已死》一文作者方可成在微博发表回应称
华尔街老司机写给雷军、王兴和黄峥们的一封信

华尔街老司机写给雷军

作为企业家来讲,应当少看股票价格,多看自己的经营,多看自
最新文章
HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例

HTML实现2列布局(左侧

这篇文章主要介绍了HTML实现2列布局(左侧宽度固定,右侧
Html读取本地文件夹下图片并显示的示例代码

Html读取本地文件夹下

这篇文章主要介绍了Html读取本地文件夹下图片并显示的
详解 html area标签

详解 html area标签

area 元素总是嵌套在 <map> 标签中。本文重点给大家介
HTML中两个tabs导航冲突问题的解决方法

HTML中两个tabs导航冲

这篇文章主要介绍了HTML中两个tabs导航冲突问题的解决
详解前端在html页面之间传递参数的方法

详解前端在html页面之

这篇文章主要介绍了详解前端在html页面之间传递参数的
详解HTML onfocus获得焦点和onblur失去焦点事件

详解HTML onfocus获得

这篇文章主要介绍了详解HTML onfocus获得焦点和onblur