onBlur bei DIV

deb_ugger

Erfahrenes Mitglied
Hallo,

ich habe folgendes Problem, für das ich noch keine passable Lösung gefunden habe. Ich blende mit einer Funktion ein <DIV> ein. Ich benutze hierfür jquery, um auch einen schönen fade-in effekt zu haben:

Code:
$("#meindiv").fadeIn("slow");

Jetzt möchte ich dieses Element wieder ausblenden, sobald ich irgendwo anders auf meiner Seite geklickt habe. Hier meine Versuche:

1. onBlur: Geht anscheinend bei DIVs nicht

2. <body onClick="hideDiv()">: Funktioniert zwar, hier wir das DIV aber auch ausgeblendet, wenn ich in "meindiv" herumklicke. Was nicht sein sollte.

3. Ich lege hinter "meindiv" eine weitere Ebene mit 100% Breite und Höhe. Sobald ich auf dieses DIV klicke, soll "meindiv" verschwinden. Problem: Sämtliche Links auf der Seite sind nicht mehr klickbar, weil dieses DIV darüber liegt.

Hat jemand eine bessere Idee?
Kann ich z.B. mit einem event listener überprüfen, ob ich "meindiv" angeklickt habe? Wenn nicht, hab ich also woanders hingeklickt und blende "meindiv" aus...?

Danke für die Hilfe!!
 
Moin,

notiere dies in dem betreffenden DIV
Code:
onclick="try{event.cancelBubble=true;}catch(e){try{event.stopPropagation();}catch(e){}}"
...das verhindert, das der Click-Event von dem DIV aus an Elternelemente hochgereicht wird.

Deine Idee mit dem Überprüfen ginge theoretisch auch, das Problem ist aber, falls das DIV Kindelemente hat und du dort hineinklickst, wird nicht #meindiv als Verursacher geortet...du müsstest dich also bei jedem Klick durch die Dokumenstruktur aufwärts wühlen und schauen, ob #meindiv gefunden wird, was wenig performant ist.
 
Zuletzt bearbeitet:
Super! Danke :-)

Hab jetzt folgendes gemacht. Bei jedem Body-click wird überprüft, ob "meindiv" eingeblendet ist. Wenn ja, solls ausgeblendet werden.
Code:
$("body").click(function(e){  
			if(document.getElementById('meindiv').style.display == 'block') {
				$("#meindiv").fadeOut("slow"); 
			}
		});

Mit deinem Code innerhalb von "meindiv" wird dies beim Klick auf das Element selbst verhindert.

Danke!!
 

Neue Beiträge

Zurück