onclick nur wenn, wenn nichts anderes?

[bert]

Habe ein Div, welches bei anklicken größer wird und mehr Inhalt zeigt

onclick="show_hide(div_id)"

In der Funktion wird einfach style.display eines Divs innerhalb des angeklicken auf block gesetzt (Standard none), bzw. falls Display=block dann eben auf none

Klappt auch wunderbar. Aber kann ich irgendwie abfangen, ob der click einem anderen Element galt? Also wenn im erscheinenden DIV ein Link steht, welcher angeklickt wird öffnet der sich zwar, aber gleichzeitig wird div wieder auf display=none gesstellt.
Kann ich das irgendwie abfangen, also in der js:funktion bzw. schon vorm Aufrauf --> onclick="if click(!other) {}"?

Danke und Gruß

[Christian S.]

Habe ein Div, welches bei anklicken größer wird und mehr Inhalt zeigt

onclick="show_hide(div_id)"

In der Funktion wird einfach style.display eines Divs innerhalb des angeklicken auf block gesetzt (Standard none), bzw. falls Display=block dann eben auf none

Klappt auch wunderbar. Aber kann ich irgendwie abfangen, ob der click einem anderen Element galt? Also wenn im erscheinenden DIV ein Link steht, welcher angeklickt wird öffnet der sich zwar, aber gleichzeitig wird div wieder auf display=none gesstellt.
Kann ich das irgendwie abfangen, also in der js:funktion bzw. schon vorm Aufrauf --> onclick="if click(!other) {}"?

Danke und Gruß

Hallo,

im Event Objekt gibt es ein target und ein currentTarget.

target wäre in deinem Beispiel der Link, currentTarget das Div.

Alternativ kannst du am Link ein onclick registrieren, und dann verhindern, dass dieses Event nach oben (zum Div) bubbelt.
Geht mit e.stopPropagation() (Firefox u.a.) und e.cancelBubble = true (IE).

Gruß!

[bert]

im Event Objekt gibt es ein target und ein currentTarget.

genau was ich brauche

Alternativ kannst du am Link ein onclick registrieren, und dann verhindern, dass dieses Event nach oben (zum Div) bubbelt.
Geht mit e.stopPropagation() (Firefox u.a.) und e.cancelBubble = true (IE).

Da der Inhalt aus einer Datenbank kommt (und zwar nicht zu wenig..) ist das zu viel Aufwand und auch zu unsauber, weil ich ja einen Link vergessen könnte.

Also versuche ich gerade meine show_hide-Funktion umzubauen. Vorher sah Sie so aus:

function show_hide_inhalt(newsinhalt) {  
	if (document.getElementById(newsinhalt).style.display != 'block') {  
		document.getElementById(newsinhalt).style.display = 'block';  
	}  
	else {  
		document.getElementById(newsinhalt).style.display = 'none';  
	}  
}

Habe target /currentTarget mal gegooglet und mich eingelesen.

Ich möchte die Funktion so umbauen, dass einfach nur vor der Reaktion geprüft wird, ob auf ein Element im DIV geklickt wurde, welches selbst eine Reaktion auslöst.

Meine if-Anweisung sieht also jetzt so aus:

if ((event.target == '[object HTMLDivElement]') || (event.target == '[object HTMLSpanElement]') || (event.target == '[object HTMLParagraphElement]') || (event.target == '[object HTMLTableElement]') || (event.target == '[object HTMLTableCellElement]') || (event.target == '[object HTMLTableSectionElement]')) {

Das Gegenteil abzufragen wäre mir lieber (if target=link || =element w\ onclick-event)

Wie mache ich das?
geht das?

[ChrisB]

Hi,

Alternativ kannst du am Link ein onclick registrieren, und dann verhindern, dass dieses Event nach oben (zum Div) bubbelt.
Geht mit e.stopPropagation() (Firefox u.a.) und e.cancelBubble = true (IE).

Da der Inhalt aus einer Datenbank kommt (und zwar nicht zu wenig..) ist das zu viel Aufwand und auch zu unsauber, weil ich ja einen Link vergessen könnte.

Nun, du könntest das DOM clientseitig durchlaufen - das liefert dir alle Links oder A-Element unterhalb eines bestimmten Elements, damit kannst du keinen "vergessen".

Unsauber wäre es hier vor allem aber, weil du nur an einem interessiert bist - dem Klick auf dein DIV-Element und *genau* darauf.
Jetzt alle Nachfahrenelemente mit eigenen onclick-Handlern zu versehen, obwohl diese auf einen solchen gar nicht gesondert reagieren sollen - das wäre ein ziemlich unsinniger Ansatz.

"Event Delegation" lautet das Stichwort.
Normalerweise ist darunter zu verstehen, dass man bspw. bei einer Tabelle nicht auf Klicks auf die einzelnen Zellen reagiert, um dann mit denen irgendwas zu machen. Sonder man registriert den Handler auf TABLE - und schaut dann bei dessen Aufruf jeweils nach, welches Nachfahrenelement das eigentliche Ziel des Klicks war - und wenn es eine Tabellezelle war, dann macht man von dieser Stelle aus das gewünschte mit dieser.
(Hier liegt der Fall zwar leicht anders - aber die dort gebrauchten Event-Eigensachften finden auch hier Verwendung.)

Meine if-Anweisung sieht also jetzt so aus:

if ((event.target == '[object HTMLDivElement]') || (event.target == '[object HTMLSpanElement]') || (event.target == '[object HTMLParagraphElement]') || (event.target == '[object HTMLTableElement]') || (event.target == '[object HTMLTableCellElement]') || (event.target == '[object HTMLTableSectionElement]')) {

Was soll die bezwecken?

MfG ChrisB

[ChrisB]

Hi,

Unsauber wäre es hier vor allem aber, weil du nur an einem interessiert bist - dem Klick auf dein DIV-Element und *genau* darauf.

Nein, "*genau* darauf" war falsch formuliert.
Der Klick, auf den reagiert werden soll, geht ja nicht "genau auf" das DIV, sondern auf ein Nachfahrenelement. Aber das DIV soll der "Reagierer" sein.

MfG ChrisB