So implementieren Sie die Unschärfefunktion von DIV

Verwenden Sie Anti-Shake, um DIV verschwinden zu lassen, 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. Dies lässt sich mit Onblur nicht erreichen.

Sie können jedoch onmouseout und Ereignisse verwenden, um DIV verschwinden zu lassen, wenn es den Fokus verliert. Bei der direkten Verwendung von onmouseout zum Erreichen des Verschwindens kann ein Problem auftreten: Wenn sich die Position Ihrer Schaltfläche und die Position des Popup-Divs nicht überschneiden, wird das onmouseout-Ereignis sofort ausgelöst, wenn sich die Maus bewegt, was nutzlos ist.

Verwenden Sie die Kombination aus Anti-Shake, Onmouseout und Onmouseover, um ein gutes Unschärfe-Erlebnis zu erzielen

    /**
     *Maus bewegt sich über Div-Ereignis*/
    Funktion moveOverEvent(ele,outTimer) {
        let overTimer = null;
        Rückgabefunktion(){
            clearTimeout(outTimer); //Wenn das Div nicht verschwindet und ein anderes Div einzieht, lösche das letzte Ereignis, das herausgezogen wurde. clearTimeout(overTimer); //Anti-Shake overTimer = setTimeout(()=>{        
                ele.style.display = "Block";
            },500);                     
        }
    }
    /**
     *Maus raus*/
    Funktion moveOutEvent(ele,outTimer) {
        Rückgabefunktion(){
            clearTimeout(outTimer); //Anti-Shake outTimer = setTimeout(()=>{ //Nach dem Aussteigen 500 ms warten, dann dieses Div verschwinden lassen
                ele.style.display = "keine";
            },500);
        }
    }

Dann habe ich zufällig entdeckt, dass das Unschärfeereignis durch Hinzufügen des Tabindex-Attributs zum Div implementiert werden kann. Der obige Code wurde daher möglicherweise umsonst geschrieben. (PS: Ich finde, dass die obige Erfahrung besser ist und viele Fehlberührungen reduziert)

//Nach dem Festlegen des Tabindex wird das Element standardmäßig mit einem Punkt versehen. Dies kann durch Festlegen von ouline = 0 entfernt werden (IE legt hidefocus = "true" fest).
<div tabindex="0" Umriss=0" hidefocus="true"></div>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.