nicht angemeldet
Div bei Klick ausserhalb ausblenden
Gunnar BittersmannHallo,
bei einem Klick auf einen Button blende ich ein Div ein, dessen Inhalt dynamisch per Ajax erstellt wird.
Der Inhalt beinhaltet ein Eingabefeld, einen Button und diverse Links.
Wenn der Benutzer ausserhalb des Div klickt, soll das Div wieder unsichtbar werden.
Mein Ansatz ist die Verwendung von onBlur, aber onBlur funktioniert nur, wenn das Div vorher auch den Fokus erhalten hat, was mit einem Einblenden aber nicht automatisch passiert.
Mit Verwendung von tabindex="1" hab ich lediglich erreicht, dass onBlur dann ausgeführt wird, wenn ich das Div irgendwo angeklickt habe, wo kein Inhalt steht.
Die Verwendung von getElementById('meinDiv').focus(); hat leider keinen Unterschied gemacht.
Zudem wird onBlur auch aufgerufen, wenn ich das Div angeklickt habe und dann in das im Div enthaltene Eingabefeld klicke.
Eine Alternative wäre ein zweites Div über die gesamte Fenstergröße zu spannen und bei Fokus beide Divs ausblendet, aber hier muss der Anwender dann immer 2 Mal klicken, damit er in ein Eingabefeld gelangt, das ausserhalb vom Div liegt.
Eine weitere Alternative wäre, jedem Element ausserhalb des Div bei Fokus das Div ausblenden lassen, aber klingt ziemlich umständlich, unpraktikabel und fehleranfällig.
Hat jemand eine bessere Lösung?
-
@@Klaus:
nuqneH
Hat jemand eine bessere Lösung?
Aufs click-Event fürs html-Element (oder ein anderes, das den gesamten Viewport füllt) reagieren und prüfen, ob das Event vom betreffenden div-Element hochgebubblet ist.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Aufs click-Event fürs html-Element (oder ein anderes, das den gesamten Viewport füllt) reagieren und prüfen, ob das Event vom betreffenden div-Element hochgebubblet ist.
Wenn ich bspw. auf den Body-Tag das onclick-Event setze, wie kann ich dann prüfen, ob der Klick tatsächlich innerhalb eines Div-Elements stattfand (um in allen anderen Fällen das Div auszublenden)?
Ich kenne bisher nur den umgekehrten Weg, also z.B. das Parent-Element zu bestimmen.Klaus
-
Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?
Wenn ich bspw. auf den Body-Tag das onclick-Event setze, wie kann ich dann prüfen, ob der Klick tatsächlich innerhalb eines Div-Elements stattfand (um in allen anderen Fällen das Div auszublenden)?
Event-Handler bekommen beim Aufruf automatisch einen Parameter übergeben. Typischerweise ist das ein Objekt in dem diverse Informationen zu dem Ereignis abgelegt sind, bei einem Klick zum Beispiel, welches Element genau geklickt wurde.
document.querySelector('body').addEventListener('click', function ( event ) { event.target; // Referenz auf das HTML-Element, das tatsächlich geklickt wurde event.currentTarget; // Referenz auf das HTML-Element, bei dem der Event-Handler registriert wurde. Also hier <body> });Ich kenne bisher nur den umgekehrten Weg, also z.B. das Parent-Element zu bestimmen.
Das ist auch der richtige Weg. Du kannst von
event.targetaus den DOM-Baum aufwärts traversieren und auf dem Weg nach oben die einzelnen Elemente testen, zum Beispiel gegen einen CSS-Selektor:element.matches('.modal-dialog');Tipp am Rande: Für deinen Fall eignet sich vermutlich das <dialog>-Element besser als ein generisches <div>-Element.
--
“All right, then, I'll go to hell.” – Huck Finn-
Hallo 1UnitedPower!
Tipp am Rande: Für deinen Fall eignet sich vermutlich das <dialog>-Element besser als ein generisches <div>-Element.
Anmerkung am Rande: Radio Eriwan sagt, theoretisch ja, aber bei der aktuellen Browserunterstützung nein! ;-)
Gruß
Gunther
-
-
-
-
@@Klaus:
nuqneH
Wenn der Benutzer ausserhalb des Div klickt, soll das Div wieder unsichtbar werden.
Und wenn der Nutzer gar nicht klickt? Unbedingt daran denken, das Ding auch auszublenden, wenn der Nutzer die [Esc]-Taste drückt!
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)