主页 > 知识库 > DIV的失去焦点(blur)实现方法

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

热门标签:默纳克系统外呼显示inns 东莞人工外呼系统多少钱 商丘电话自动外呼系统怎么收费 朝阳自动外呼系统 400电话办理尚景 周口导航地图标注 400电话是在哪里申请 地图标注地点下载 昌邑外呼系统

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

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

标签:福建 沈阳 铜陵 那曲 揭阳 健身房 阿拉善盟 湖南

巨人网络通讯声明:本文标题《DIV的失去焦点(blur)实现方法》,本文关键词  DIV,的,失去,焦点,blur,实现,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《DIV的失去焦点(blur)实现方法》相关的同类信息!
  • 本页收集关于DIV的失去焦点(blur)实现方法的相关信息资讯供网民参考!
  • 推荐文章