How to implement DIV's blur function

Use anti-shake to make DIV disappear when the mouse moves out

Since the div tag itself does not support the onblur event, for a div that pops up when a button is clicked, we want to make it disappear when the div loses focus, which cannot be achieved using onblur.

However, you can use onmouseout and events to make DIV disappear when it loses focus. There may be a problem with directly using onmouseout to achieve disappearance: if the position of your button and the position of the pop-up div do not overlap, the onmouseout event will be triggered immediately when the mouse moves, which is useless.

Use the combination of anti-shake, onmouseout, and onmouseover to achieve a good blur event experience

    /**
     *Mouse moves over div event*/
    function moveOverEvent(ele,outTimer) {
        let overTimer = null;
        return function(){
            clearTimeout(outTimer); //If the div does not disappear, if another div moves in, clear the last event that was moved out clearTimeout(overTimer); //Anti-shake overTimer = setTimeout(()=>{        
                ele.style.display = "block";
            },500);                     
        }
    }
    /**
     *Mouse out*/
    function moveOutEvent(ele,outTimer) {
        return function(){
            clearTimeout(outTimer); //Anti-shake outTimer = setTimeout(()=>{ //Wait 500ms after moving out, and then disappear this div
                ele.style.display = "none";
            },500);
        }
    }

Then I accidentally discovered that the blur event can be implemented by adding the tabindex attribute to the div, so the above code may have been written in vain. (PS I feel the above experience is better, reducing a lot of false touches)

//After setting tabindex, the element is dotted by default, which can be removed by setting ouline=0 (IE sets hidefocus="true")
<div tabindex="0" outline=0" hidefocus="true"></div>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.