Use anti-shake to make DIV disappear when the mouse is moved 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 and cannot be achieved using onblur.
But you can use onmouseout and events to realize the function of DIV losing focus and disappearing. There may be a problem with directly using onmouseout to realize removal and disappearance: if the position of your button and the position of the pop-up div are not coincident, 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 blur event with a good experience
/** *Mouse moves over div event*/ function moveOverEvent(ele,outTimer) { let overTimer = null; return function(){ clearTimeout(outTimer); //If the div does not disappear, move the div in, then Clear the last removed event clearTimeout(overTimer); //Anti-shake overTimer = setTimeout(()=>{ ele.style.display = block; },500); } } /** * Mouse moves out*/ function moveOutEvent(ele,outTimer) { return function(){ clearTimeout(outTimer); //Anti-shake outTimer = setTimeout(()=>{ //Wait 500ms after moving out, 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 experience above will be better and reduce a lot of accidental touches)
//After tabindex is set, the element will add a dotted line by default and remove it through ouline=0 (IE sets hidefocus=true) <div tabindex=0 outline=0 hidefocus=true></div>
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.