用防抖实现DIV鼠标移出消失

用防抖实现DIV鼠标移出消失

  由于div标签本身不支持onblur事件,所以对于点击一个按钮弹出的div,我们想要当这个div失去焦点的时候,让它消失不能使用的onblur来实现。

  但是可以利用onmouseout和事件来实现DIV失去焦点消失的功能。直接使用onmouseout来实现移出消失可能会有一个问题:假设你的按钮的位置和弹出的div的位置不是重合的那么会导致鼠标移动就会马上去触发onmouseout事件,从而没什么卵用。

  利用防抖、onmouseoutonmouseover组合来实现一个体验很好的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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.获取一堆name名相同的div,点击弹出显示第几个div (本题主要考察闭包的用法,是在面试中常被问的题目,不...
    Wang997阅读 932评论 0 2
  • 1. 前面从另一个角度解释了成功,“成功是99%的汗水加上1%的灵感”这句话其实是不对的,成功应该是技能+运气。 ...
    园游小会阅读 351评论 0 0
  • 亲爱的马大恩子: 这是你阿妈第一次给你写信。此时此刻我们坐的火车已经开到了郑州,而因为下午已经睡饱的你,现...
    茉莉大大阅读 187评论 0 0
  • 今天想和大家聊一聊Android软键盘的处理,也就是android:windowSoftInputMode属性,相...
    不二先生的世界阅读 2,248评论 2 7
  • 斜卧枕边书, 羁旅他乡屋。 阿娘轻声念, 游子月下哭。
    墨小凝阅读 193评论 2 2

友情链接更多精彩内容