onmouseover verzögern

[bert]

Gibt es eine simple Lösung, um ein onmouseover zu verzögern? 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..

[Struppi]

Gibt es eine simple Lösung, ...

Nein.

Struppi.

[EKKi]

Mahlzeit bert,

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

Ergänzend zu Struppis durchaus richtigem Beitrag ein Vorschlag, wie Du es "unsimpler" lösen könntest:

1.) Setze beim "onmousovern" einen Timeout auf die Funktion, die das ausführt, was nach einer Sekunde passieren soll. Merke Dir gleichzeitig in geeigneter Form (man könnte globale Variablen benutzen - ich halte das für keine gute Idee ... nimm stattdessen lieber eine Eigenschaft des Elements, setze z.B. eine Klasse wie "hover").

2.) Entferne beim "onmousouten" diesen "Merker" (im von mir vorgeschlagenen Fall also die Klasse "hover" des Elements).

3.) Überprüfe innerhalb der Funktion, die das tut, was nach einer Sekunde passieren soll, ob der Merker gesetzt ist (ob das Element also die Klasse "hover" besitzt) - nur dann soll die Aktion ausgeführt werden. Ansonsten kann die Funktion sich wieder hinlegen.

MfG,
EKKi

[Felix Riesterer]

Lieber EKKi,

1.) Setze beim "onmousovern" einen Timeout [...]

2.) Entferne beim "onmousouten" diesen "Merker" [...]

3.) Überprüfe innerhalb der Funktion[...]

also in etwa so?

Liebe Grüße,

Felix Riesterer.

[EKKi]

Mahlzeit Felix Riesterer,

also in etwa so?

Und das von Dir ... ;-)

MfG,
EKKi

[Felix Riesterer]

Lieber EKKi,

also in etwa so?

Und das von Dir ... ;-)

ja, eigentlich habe ich etwas gegen das Posten von Komplettlösungen. Aber dieses Thema hatte ich unlängst sowieso vor (CSS-Hover durch JavaScript "schwerfälliger" machen), sodass ich mich hier einfach einmal an die Arbeit gemacht habe - daher ist es auch ungetestet und "funzt" wahrscheinlich nicht wirklich (gut).

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

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.

[bert]

Vielen Dank! Werde mich mal hinsetzen und den Code durchgehen. Zumindest die Logik dahinter habe ich schonmal verstanden :-)

Danke euch allen
Gruß

[JürgenB]

Hallo bert,

wenn hier schon fertige Lösungen vorgestellt werden, hier auch noch eine aus meiner Wühlkiste:

  <script type="text/javascript">  
    window.onload = function() {  
      var el = document.getElementById("mover");  
      el.onmouseover = function() {  
        var dieses = this;  
        this.to = window.setTimeout(function() {  
          dieses.style.backgroundColor = "#ff0000";  
        },1000) ;  
      }  
      el.onmouseout = function() {  
        window.clearTimeout(this.to) ;  
        this.style.backgroundColor = "#ffffff";  
      }  
    }  
  </script>

<p id="mover">Hier mit der Maus rüber und eine Sekunde warten, oder auch nicht.</p>

(Mouseover verzögert)

Gruß, Jürgen