nicht angemeldet
Ein schnelles ungetestetes Konzept mit jQuery.
und zwar habe ich einen Button Kontakt, der bei Überfahren mit der Maus das Formular öffnen soll.
$("buttonkontakt").mouseenter(function () {
$("kontakt").show();
});
Mouseenter und mouseleave statt mouseover und mouseout, weil letztere aufsteigen (Bubbling) und somit unzählige irrelevante mouseover- und mouseout-Events passieren.
Wenn ich den Button wieder verlasse, so soll sich das Formular wieder schliessen, es sei denn, ich fahre von dem Button aus auf das Formular.
Mit der Event-Eigenschaft relatedTarget kannst du abfragen, wohin sich der Mauszeiger beim Verlassen des Elements hinbewegt.
$("buttonkontakt").mouseleave(function (e) {
var formularJ = $("kontakt");
var formularE = formularJ.get(0);
if (
// Verlässt der Mauszeiger das Element in Richtung Formular?
e.relatedTarget != formularE &&
// Oder in Richtung eines seiner Kindelemente? (Ist #kontakt ein Elternelement vom Element, zu dem sich der Zeiger bewegt?)
$(e.relatedTarget).parents().filter("#kontakt").length == 1) {
// Zeiger bewegt sich offenbar woanders hin. Verstecke Formular
formularJ.hide()
}
})
Anstatt
$(e.relatedTarget).parents().filter("#kontakt").length == 1
könnte man auch schreiben
!formularE.contains(e.relatedTarget)
Dann müsste man contains aber im Gecko nachrüsten
Sollte ich dann das Formular mit der Maus verlassen, soll es sich ebenfalls schliessen. Und zu guter letzt soll das Formular offenbleiben, wenn ein Eingabefeld den Folkus hat.
Das wird schwieriger. Ich würde hier mit bubblenden DOMFocusIn- bzw. focusin-Event arbeiten.
function kontaktFormularFocus () {
// Setze einen Flag beim Fokussieren eines Feldes
$("kontakt").data("focussed", true);
}
function kontaktFormularBlur () {
// Setze den Flag beim Verlassen des Feldes zurück
$("kontakt").data("focussed", false);
}
// Überwache bubblende focus-Ereignisse
$("buttonkontakt :input")
.bind("DOMFocusIn", kontaktFormularFocus)
.bind("focusin", kontaktFormularFocus)
.bind("DOMFocusOut", kontaktFormularBlur)
.bind("focusout", kontaktFormularBlur)
// Ob jQuery das mitmacht, weiß ich nicht
// Frage den Flag beim Verlassen des Formulars ab
$("buttonkontakt").mouseleave(function () {
if ($("kontakt").data("focussed")) {
$("kontakt").hide();
}
})
Ich weiss, das is ne Menge Holz aber evtl hat ja jemand ne Idee, wie man mir helfen könnte.
Eine Idee schon.
Aber wirklich umsetzen würde ich das nicht wollen. Ich halte das nicht für sonderlich bedienbar, und es robust hinzukriegen, wäre sehr, sehr schwierig.
Mathias