Verwenden Sie Anti-Shake, damit DIV verschwindet, wenn die Maus herausbewegt wird
Da das div-Tag selbst das onblur-Ereignis nicht unterstützt, möchten wir, dass ein div, das beim Klicken auf eine Schaltfläche angezeigt wird, verschwindet, wenn das div den Fokus verliert, was mit onblur nicht erreicht werden kann.
Aber Sie können onmouseout und events verwenden, um die Funktion von DIV zu erkennen, die den Fokus verliert und verschwindet. Bei der direkten Verwendung von onmouseout zum Realisieren von Entfernen und Verschwinden liegt möglicherweise ein Problem vor: Wenn die Position Ihrer Schaltfläche und die Position des Popup-Divs nicht übereinstimmen, wird das Ereignis onmouseout sofort ausgelöst, wenn sich die Maus bewegt, was nutzlos ist.
Verwenden Sie die Kombination aus Anti-Shake, Onmouseout und Onmouseover, um ein Unschärfeereignis mit einem guten Erlebnis zu erzielen
/** *Maus bewegt sich über Div-Ereignis*/ function moveOverEvent(ele,outTimer) { let overTimer = null; return function(){ clearTimeout(outTimer); //Wenn das Div nicht verschwindet, verschieben Sie das Div hinein, dann löschen das letzte entfernte Ereignis clearTimeout(overTimer); //Anti-shake overTimeout(()=>{ ele.style.display = block; },500 } /** * Maus bewegt sich hinaus*/ function moveOutEvent(ele,outTimer) { return function(){ clearTimeout(outTimer); //Anti-Shake outTimer = setTimeout(()=>{ //Warten Sie 500 ms nach dem Herausziehen und verschwinden Sie dann dieses Div-Element .style .display = none },500);Dann habe ich zufällig entdeckt, dass das Unschärfeereignis durch Hinzufügen des Tabindex-Attributs zum Div implementiert werden kann, sodass der obige Code möglicherweise umsonst geschrieben wurde. (PS: Ich habe das Gefühl, dass das obige Erlebnis besser ist und viele versehentliche Berührungen reduziert.)
//Nachdem tabindex festgelegt wurde, fügt das Element standardmäßig eine gepunktete Linie hinzu und entfernt sie über ouline=0 (IE setzt hidefocus=true) <div tabindex=0 outline=0 hidefocus=true></div>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.