Use anti-vibración para hacer que DIV desaparezca cuando se mueve el mouse
Dado que la etiqueta div en sí no admite el evento onblur, para un div que aparece cuando se hace clic en un botón, queremos hacerlo desaparecer cuando el div pierde el foco y no se puede lograr usando onblur.
Pero puedes usar onmouseout y eventos para realizar la función de que DIV pierda el foco y desaparezca. Puede haber un problema al usar onmouseout directamente para realizar la eliminación y desaparición: si la posición de su botón y la posición del div emergente no coinciden, el evento onmouseout se activará inmediatamente cuando el mouse se mueva, lo cual es inútil.
Utilice la combinación de anti-vibración, onmouseout y onmouseover para lograr un evento de desenfoque con una buena experiencia
/** *El mouse se mueve sobre el evento div*/ function moveOverEvent(ele,outTimer) { let overTimer = null; return function(){ clearTimeout(outTimer); //Si el div no desaparece, muévalo hacia adentro y luego borre. el último evento eliminado clearTimeout(overTimer); //Anti-shake overTimer = setTimeout(()=>{ ele.style.display = block; } } } /** *); El mouse se mueve hacia afuera*/ function moveOutEvent(ele,outTimer) { return function(){ clearTimeout(outTimer); //Anti-shake outTimer = setTimeout(()=>{ //Espera 500 ms después de salir, luego desaparece este div ele .estilo .display = ninguno; },500);Luego descubrí accidentalmente que el evento de desenfoque se puede implementar agregando el atributo tabindex al div, por lo que es posible que el código anterior se haya escrito en vano. (PD: Siento que la experiencia anterior será mejor y reducirá muchos toques accidentales)
//Después de configurar tabindex, el elemento agregará una línea de puntos de forma predeterminada y la eliminará mediante ouline=0 (IE establece hidefocus=true) <div tabindex=0 contorno=0 hidefocus=true></div>
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.