[Erledigt] Div bei Klick außerhalb von Div schließen

Karottenkopf51 · 02.08.2011, 07:27

Servus,

habe über JavaScript ein kleines Optionsmenü in meiner Galerie eingebaut. Das Öffnen und Schließen an sich funktioniert einwandfrei, allerdings möchte ich das Schließen noch etwas erweitern.

Mit einem Klick auf 'Optionen' erscheint ein Div mit den entsprechenden Optionen. Nun soll sich das Div wieder schließen, wenn ich außerhalb von dem Div die Maustaste drücke.

Habe recherchiert und leider nichts gefunden. Meine Idee war es, dem Body Element ein onClick mit dem entsprechenden Funktionsaufruf zu geben, allerdings wird erst der onClick vom Div und dann der onClick vom Body verarbeitet, womit sich das Div direkt wieder schließt.

Code:

function setOptionsHidden(){
	document.getElementById("options_0").style.visibility = "hidden";
	document.getElementById("options_1").style.visibility = "hidden";
	document.getElementById("options_2").style.visibility = "hidden";
	document.getElementById("options_3").style.visibility = "hidden";
	document.getElementById("options_4").style.visibility = "hidden";
	document.getElementById("options_5").style.visibility = "hidden";
}

function setOptionsVisible(id){
	setOptionsHidden();
	document.getElementById("options_"+id).style.visibility = "visible";
}

Jemand eine Idee?

Gruß

fab · 02.08.2011, 08:32

Zitat:

Zitat von Karottenkopf51

Meine Idee war es, dem Body Element ein onClick mit dem entsprechenden Funktionsaufruf zu geben

So weit, so gut, jetzt musst du in diesem Event Handler nur noch überprüfen ob target dein div oder ein untergeordnetes Element ist und in dem Fall nichts tun.

Siehe auch Bubbling / Capturing

Karottenkopf51 · 29.08.2011, 07:00

Entschuldigung für die späte Antwort, aber wie genau prüfe ich denn im Body, welches Target (also wo ich gerade hinklicke) ich habe? Aus deinem Link werde ich leider nicht wirklich schlau.

Dark Guardian · 29.08.2011, 11:02

Der Artikel beschriebt JavaScript Event Bubbling.

Das heißt: Wenn du auf ein Kind-Element klickst wird auch der onclick des Elternelements ausgelöst.

Da dein body-Element ein Elternelement von "allem" ist, wird das onlcick hier immer ausgelöst, egal wohin du klickst.

Wie in dem Artikel zu lesne hat ein Event die Eigenschaft target, welche mit dme Element gefüllt ist das ursprünglich angeklickt wurde. D.h. klickst du auf dein div und das body Event istd ran, steht in event.target immernoch das dein div angeklickt wurde. Dadurch kannst du dann auch einfach "nichts" machen wenn das der Fall ist.

Karottenkopf51 · 29.08.2011, 11:53

Kann man auch mit IDs bzw. Namen arbeiten, statt mit den eigentlichen Tags? Wie würden denn diese Abfragen aussehen? Kann mir leider nichts darunter vorstellen.

Also meine DIVs heißen options_0, options_1 etc.

Und diese sollen verschwinden, sobald ich auf den Body, aber nicht auf das betroffene Element klicke.

ChrisB · 29.08.2011, 12:25

Zitat:

Zitat von Karottenkopf51

Kann man auch mit IDs bzw. Namen arbeiten, statt mit den eigentlichen Tags?

Das tust du doch in deinem eingangs gezeigten Code bereits.

Karottenkopf51 · 29.08.2011, 13:17

Ja schon, aber ich meine wie prüfe ich mein Target? Ich bräuchte ein Beispiel, ich blicke da einfach nicht durch. Also ich setze ein onClick auf mein Body und rufe eine Funktion auf. In der Funktion prüfe ich, ob das Target = ??? ist? Wie stelle ich das an?

ChrisB · 29.08.2011, 13:23

Ach komm, jetzt beschaeftige dich doch bitte mal ein bisschen selber damit

Der Link von fab erklaert doch, was es mit dem target auf sich hat und wie man es abfragt.

Karottenkopf51 · 29.08.2011, 13:51

Code:

function js_strpos(haystack, needle, offset) {
    var i = (haystack + '').indexOf(needle, (offset || 0));
    return i === -1 ? false : i;
}

function bodyCloseAll(e){
    e = e || event;
    var target = e.target || e.srcElement;
	if(js_strpos(target, 'options_', 0) != 0 || js_strpos(target, 'rating_', 0) != 0){
		setOptionsHidden();
	}
}

Ich möchte mit der Funktion bodyCloseAll bezwecken, dass wenn mein target nicht 'options_' oder 'rating_' enthält, alle Divs (setOptionsHidden) geschlossen werden. Es funktioniert aber nicht

ChrisB · 29.08.2011, 13:59

Natuerlich funktioniert das nicht, weil das target nicht "'options_' oder 'rating_' enthält" - das target ist ein HTML-Elementobjekt.
Wenn du auf dessen ID-Attribut zugreifen moechtest - dann mach das auch.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Slimbox bei Klick auf Bild schließen	d0t	JavaScript, Ajax und mehr	3	28.02.2011 19:16
Sicherheitslücke im PHP schließen ????	ben-NRW	Scriptbörse	8	14.07.2010 16:58
Mit JS einen KLICK vortäuschen	ITrun90	JavaScript, Ajax und mehr	10	04.05.2010 13:47
Link auf Dateien außerhalb des Document Root	michael2105	PHP-Fortgeschrittene	9	24.04.2010 22:07
[Erledigt] MySQL Link Resource in einer statischen Variablen speichern	Lenki	PHP-Fortgeschrittene	8	18.03.2010 16:37
Scriptangebot 1 Klick Counter Hosting Script	Charbel	Scriptbörse	0	23.06.2009 07:43
[Erledigt] per klick (außerhalb vom div) funktion aufrufen	amateur_php	JavaScript, Ajax und mehr	9	17.10.2008 14:32
[Erledigt] div per Drag&amp;amp;Drop verschieben und bei Klick ausserhalb s	Juuro	HTML, Usability und Barrierefreiheit	2	11.01.2008 12:30
input inhalt bei klick ändern	jar3d	HTML, Usability und Barrierefreiheit	3	10.01.2008 16:33
Fenster schließen und neu öffnen lassen	max-dhom	HTML, Usability und Barrierefreiheit	2	01.04.2007 20:55
Frame schließen und [Erledigt] Div bei Klick außerhalb von Div schließen	workaholic	HTML, Usability und Barrierefreiheit	2	06.09.2005 13:36
Bildwechsel beim Klick		HTML, Usability und Barrierefreiheit	1	12.07.2005 23:49
Text in Input per Klick hinzufügen, bei erneutem Klick lösch	18inch	HTML, Usability und Barrierefreiheit	2	05.03.2005 14:01
ADCELL Vermarktung zu 75% Pay per Klick Kampagnen		Beitragsarchiv	0	18.10.2004 12:37
fenster "resizen" nach dem schließen		PHP Tipps 2004	1	29.09.2004 15:45

02.08.2011, 07:27
Karottenkopf51 Benutzer Registriert seit: 09.05.2011 Beiträge: 50 PHP-Kenntnisse: Anfänger	[Erledigt] Div bei Klick außerhalb von Div schließen Servus, habe über JavaScript ein kleines Optionsmenü in meiner Galerie eingebaut. Das Öffnen und Schließen an sich funktioniert einwandfrei, allerdings möchte ich das Schließen noch etwas erweitern. Mit einem Klick auf 'Optionen' erscheint ein Div mit den entsprechenden Optionen. Nun soll sich das Div wieder schließen, wenn ich außerhalb von dem Div die Maustaste drücke. Habe recherchiert und leider nichts gefunden. Meine Idee war es, dem Body Element ein onClick mit dem entsprechenden Funktionsaufruf zu geben, allerdings wird erst der onClick vom Div und dann der onClick vom Body verarbeitet, womit sich das Div direkt wieder schließt. Code: function setOptionsHidden(){ document.getElementById("options_0").style.visibility = "hidden"; document.getElementById("options_1").style.visibility = "hidden"; document.getElementById("options_2").style.visibility = "hidden"; document.getElementById("options_3").style.visibility = "hidden"; document.getElementById("options_4").style.visibility = "hidden"; document.getElementById("options_5").style.visibility = "hidden"; } function setOptionsVisible(id){ setOptionsHidden(); document.getElementById("options_"+id).style.visibility = "visible"; } Jemand eine Idee? Gruß


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

29.08.2011, 07:00
Karottenkopf51 Benutzer Registriert seit: 09.05.2011 Beiträge: 50 PHP-Kenntnisse: Anfänger	Entschuldigung für die späte Antwort, aber wie genau prüfe ich denn im Body, welches Target (also wo ich gerade hinklicke) ich habe? Aus deinem Link werde ich leider nicht wirklich schlau.

29.08.2011, 11:02
Dark Guardian Erfahrener Benutzer Registriert seit: 10.10.2009 Beiträge: 2.630 PHP-Kenntnisse: Fortgeschritten	Der Artikel beschriebt JavaScript Event Bubbling. Das heißt: Wenn du auf ein Kind-Element klickst wird auch der onclick des Elternelements ausgelöst. Da dein body-Element ein Elternelement von "allem" ist, wird das onlcick hier immer ausgelöst, egal wohin du klickst. Wie in dem Artikel zu lesne hat ein Event die Eigenschaft target, welche mit dme Element gefüllt ist das ursprünglich angeklickt wurde. D.h. klickst du auf dein div und das body Event istd ran, steht in event.target immernoch das dein div angeklickt wurde. Dadurch kannst du dann auch einfach "nichts" machen wenn das der Fall ist. __________________ "Alles im Universum funktioniert, wenn du nur weißt wie du es anwenden musst".

29.08.2011, 11:53
Karottenkopf51 Benutzer Registriert seit: 09.05.2011 Beiträge: 50 PHP-Kenntnisse: Anfänger	Kann man auch mit IDs bzw. Namen arbeiten, statt mit den eigentlichen Tags? Wie würden denn diese Abfragen aussehen? Kann mir leider nichts darunter vorstellen. Also meine DIVs heißen options_0, options_1 etc. Und diese sollen verschwinden, sobald ich auf den Body, aber nicht auf das betroffene Element klicke. Geändert von Karottenkopf51 (29.08.2011 um 11:59 Uhr).

29.08.2011, 13:17
Karottenkopf51 Benutzer Registriert seit: 09.05.2011 Beiträge: 50 PHP-Kenntnisse: Anfänger	Ja schon, aber ich meine wie prüfe ich mein Target? Ich bräuchte ein Beispiel, ich blicke da einfach nicht durch. Also ich setze ein onClick auf mein Body und rufe eine Funktion auf. In der Funktion prüfe ich, ob das Target = ??? ist? Wie stelle ich das an?

29.08.2011, 13:23
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Ach komm, jetzt beschaeftige dich doch bitte mal ein bisschen selber damit Der Link von fab erklaert doch, was es mit dem target auf sich hat und wie man es abfragt. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

29.08.2011, 13:59
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Natuerlich funktioniert das nicht, weil das target nicht "'options_' oder 'rating_' enthält" - das target ist ein HTML-Elementobjekt. Wenn du auf dessen ID-Attribut zugreifen moechtest - dann mach das auch. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?