DIV的落空核心(blur)完成

2023年6月6日 146次阅读 来源: 恭弘=叶 恭弘子二号

用防抖完成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>
    原文作者：恭弘=叶 恭弘子二号
    原文地址: https://segmentfault.com/a/1190000015980289
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞