Da ich durch meinen Jobwechsel nun in der Frontend Entwicklung tätig bin, muss ich mich natürlich auch stärker mit Javascript – speziell mit jQuery – beschäftigen. Das System ist ziemlich genial gebaut und so kann man sehr schnell einsteigen.
Aber wie das so ist – man stößt auch mal auf Probleme. Und so hing ich an der Aufgabe, ein Hover-Event verzögert auszulösen. Zunächst ging ich davon aus, das jQuery diese Möglichkeit von Haus aus bietet – was aber nicht der Fall ist. Man kann zwar das Plugin HoverIntent verwenden, ich wollte aber eher eine Lösung mit Bordmitteln. Und die gibt es:
$("#cart-summary").mouseenter(function () {
$("#cart-summary").addClass("hasFocus");
setTimeout(function(){
if ($("#cart-summary").hasClass("hasFocus")) {}
$('.flycart').slideDown('fast');
}
}, 500 );
});
$("#cart-summary").mouseleave(function () {
$("#cart-summary").removeClass("hasFocus");
});
Das Prinzip ist eigentlich ziemlich genial: Per “Mousenter” wird erkannt, ob sich die Maus über dem Element (in diesem Beispiel “#cart-summary”)befindet. Sofort wird dem Element die Klasse “hasFocus” zugewiesen und der eigentliche Funktionsaufruf (z.B. “slideDown”) wird mittels der TimeOut Funktion verzögert (hier um 0,5 Sekunden) aufgerufen. Der Trick ist nun, dass innerhalb der Timeoutfunktion noch einmal geprüft wird, ob das Element noch die Klasse “hasFocus” hat. Nur wenn dies der Fall ist, wird die “slideDown” Funktion ausgeführt.
Der findige Entwickler wird nun bemerken, dass trotz dieser Raffinessen, das gleiche Ergebnis, wie bei einem einfachen Hover, erziehlt wird – denn auch mit Timeout wird die Funktion in jedem Fall aufgerufen. Und da kommt das zweite Event ins Spiel: bei einem “MouseLeave” wird dem aktuellen Element die Klasse “hasFocus” entfernt. Dadurch schlägt die Prüfung in der TimeOut Funktion fehl und die hinterlegte “slideDown” Funktion wird nicht ausgeführt.
Erst mittels der “MouseLeave” Funktion wird also das verzögerte MouseOver Event ermöglicht.