Felix Riesterer: onmouseover verzögern

Beitrag lesen

Lieber bert,

Gibt es eine simple Lösung, um ein onmouseover zu verzögern?

nein.

Also dass man mindestens 1 Sekunde "onmouseovern" muss, damit "es zählt"? Wenn man innerhalb der vorgegebenen Zeit wieder "onmousoutet" soll einfach gar nichts passieren..

Dazu musst Du Dir ein kleines Set an Parametern basteln, die das Timing steuern. Das könnte in etwa so aussehen:

function hoverLater (el, m) { // el = gewünschtes Element, m = Anzahl Millisekunden  
    // Countdown-Eigenschaft einrichten  
    el.countDown = false; // soll überhaupt ein Countdown stattfinden?  
  
    // Hover-Funktion einrichten bzw. erweitern  
    el.oldOnMouseOver = el.mouseover; // alte Hover-Funktion merken  
    el.onmouseover = function (e) {  
        // e trägt je nach Browser das event-Objekt und muss "weitergereicht" werden  
  
        // this bezieht sich auf das Element, in dem das Ereignis auftritt  
        this.countDown = true; // es soll jetzt der Countdown stattfinden  
  
        var t = this; // Referenz auf das aktuelle Element speichern  
        var ev = e; // Referenz auf das aktuelle Ereignis speichern  
        var f = function () {  
            // Variable "t" ist hier bekannt (Closure)!  
            // "this" würde auf das window-Objekt deuten!  
            if (t.countDown // Countdown nicht unterbrochen worden?  
                && typeof t.oldOnMouseOver == "function"  
            ) {  
                // Countdown zurücksetzen  
                t.countDown = false;  
  
                // eigentliche Hover-Funktion ausführen  
                t.oldOnMouseOver(ev); // "ev" ist bekannt (Closure)!  
            }  
  
        };  
  
        window.setTimeout(f, milliseconds); // Funktion f in m Millisekunden durch Timeout ausführen lassen  
  
        return true; // weiter mit Event  
    };  
  
    // Hover-Ende-Funktion erweitern bzw. -Unterbrechung einrichten  
    el.oldOnMouseOut = el.onmouseout;  
    el.onmouseout = function (e) {  
        // eventuellen Countdown abbrechen  
        this.countDown = false;  
  
        // eigentliche un-Hover-Funktion ausführen  
        if (typeof this.oldOnMouseOut == "function") {  
            this.oldOnMouseOut(e);  
        }  
    };  
}

Obiger Code ist einfach nur so hingeschrieben und könnte nicht funktionieren, da ich ihn nicht getestet habe! Wenn er aber "funktioniert", dann kann man mit der Funktion "hoverLater" jedes Element "ausrüsten", damit seine Hover-Funktionalität verzögert wird.

Liebe Grüße,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)