Fehlfunktion beim Ein- und Ausblenden

[minicrispie]

Hallo,

seit kurzem befasse ich mich malwieder mit JavaScript, da ich in letzter Zeit nur mit C zutun hatte.
Nun habe ich ein Tool geschrieben, was viele kleine Funktion beherbergt. Um Etwas übersicht reinzubringen, wollte ich mit Javascript die Bereiche ein- und ausblenden, sonfern sie gebraucht werden.
Dazu nutze ich mouseover und mouseout. In dem Contentbereich eines Divs habe ich logischerweise Buttons und Textfelder, etc...
Jedesmal, wenn ich über diese Elemente fahre, dann wird die einklapp-funktion ausgelöst. Ich weis nicht, woran es liegt. Könnt ihr mir helfen?

Hier der Code (Stylesheet weggelassen):

  
			function einblenden( obj, akt )  
			{  
				obj.style.opacity = akt;  
				if( akt < 1 )  
				{  
					akt += 0.1;  
					setTimeout( function() { einblenden( obj, akt ); }, 2);  
				}  
			}  
			function ausklappen( obj )  
			{  
				if( obj.getElementsByTagName("div")[1].style.opacity == 0 )  
				{  
					obj.getElementsByTagName("div")[1].style.height = obj.getAttribute("title") + "px";  
					einblenden( obj.getElementsByTagName("div")[1], 0 );  
				}  
			}  
			function einklappen( obj )  
			{  
				obj.getElementsByTagName("div")[1].style.height  = "0px";  
				obj.getElementsByTagName("div")[1].style.opacity =   0.0;  
			}  

  
		<div class="bereich" onmouseover="ausklappen(this)" onmouseout="einklappen(this)" title="250">  
			<div class="bereich_header">  
				Vom Hexadezimalen ins Dezimale -> Farbcode  
			</div>  
			<div class="bereich_content">  
				Eingabe des Hexadezimalwertes: <input type="text" id="eingabe_hex">  
				<input type="button" onclick="hex_berechne()" value=" Berechnen ">  
				<br>  
				<b>Ergebnis:</b><br>  
				<span id="hex_output"></span>  
			</div>  
		</div>  

MfG. Christoph Ludwig

[molily]

Dazu nutze ich mouseover und mouseout. In dem Contentbereich eines Divs habe ich logischerweise Buttons und Textfelder, etc...
Jedesmal, wenn ich über diese Elemente fahre, dann wird die einklapp-funktion ausgelöst. Ich weis nicht, woran es liegt. Könnt ihr mir helfen?

Am Event-Bubbling.
Mouseover- und Mouseout-Ereignisse passieren bei den Kindelementen, steigen auf und lösen den entsprechenden Handler beim div-Element aus.
Besser wären die Ereignisse mouseenter und mouseleave, allerdings kennt die nur der IE. In anderen Browsern kann man sie emulieren, indem man abfragt, woher die Maus kam bzw. wohin sie geht (relatedTarget bzw. fromElement/toElement) und ob dieses Element im div liegt oder außerhalb.
Beispiel dafür:
http://molily.de/temp/mouseenter-mouseleave.html

Mathias

[minicrispie]

Hallo,

»» Dazu nutze ich mouseover und mouseout. In dem Contentbereich eines Divs habe ich logischerweise Buttons und Textfelder, etc...
»» Jedesmal, wenn ich über diese Elemente fahre, dann wird die einklapp-funktion ausgelöst. Ich weis nicht, woran es liegt. Könnt ihr mir helfen?

Am Event-Bubbling.
Mouseover- und Mouseout-Ereignisse passieren bei den Kindelementen, steigen auf und lösen den entsprechenden Handler beim div-Element aus.
Besser wären die Ereignisse mouseenter und mouseleave, allerdings kennt die nur der IE. In anderen Browsern kann man sie emulieren, indem man abfragt, woher die Maus kam bzw. wohin sie geht (relatedTarget bzw. fromElement/toElement) und ob dieses Element im div liegt oder außerhalb.
Beispiel dafür:
http://molily.de/temp/mouseenter-mouseleave.html

schönes Beispiel. Und es funktioniert auch.
Nur ich hab die Funktionen over() und out() jetz für meine zwecke mal umgewandelt. Jetzt zeigt mir der FF: this.contains is not a function
auch auf der SELFHTML-Erklärung( http://de.selfhtml.org/javascript/objekte/anzeige/all_contains.htm@title=hier ) zeigt er mir das an. Nur warum funktioniert die Methode bei dir, aber überall anders nicht? Und das bei ein und demselben Browser ...
Hier nochmal der abgewandelte Code:

  
function over (e)  
			{  
				    e           = e               || window.event;  
				var target      = e.target        || e.srcElement;  
				var fromElement = e.relatedTarget || e.fromElement || false;  
  
				if (this.contains(fromElement) || fromElement == this)  
				{  
					return;  
				}  
				alert("Mouseover");  
			}  
			function out (e)  
			{  
				    e         = e               || window.event;  
				var target    = e.target        || e.srcElement;  
				var toElement = e.relatedTarget || e.toElement || false;  
  
				if (this.contains(toElement) || toElement == this)  
				{  
					return;  
				}  
				alert("Mouseout");  
			}  
  
//Die hier ist neu dazugekommen:  
function window_onload()  
			{  
				document.getElementsByClassName("bereich")[0].onmouseover = over;  
				document.getElementsByClassName("bereich")[0].onmouseout  = out;  
			}  

  
<!-- Und hier nochmal der HTML-Teil -->  
<div class="bereich" title="250">  
			<div class="bereich_header">  
				Vom Hexadezimalen ins Dezimale -> Farbcode  
			</div>  
			<div class="bereich_content">  
				Eingabe des Hexadezimalwertes: <input type="text" id="eingabe_hex">  
				<input type="button" onclick="hex_berechne()" value=" Berechnen ">  
				<br>  
				<b>Ergebnis:</b><br>  
				<span id="hex_output"></span>  
			</div>  
		</div>  

MfG. Christoph Ludwig

[juewi]

... Nur warum funktioniert die Methode bei dir, aber überall anders nicht? Und das bei ein und demselben Browser ...

Hatte mal ähnliches Problem "dort gehts, bei mir nicht":
verwendest Du den denselben Doctype?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  

[molily]

Firefox kennt contains nicht, aber die Beispielseite enthält die Funktion für Firefox »nachgerüstet« über prototypische Erweiterung von Node. Diese musst du auch übernehmen. Andere Browser kennen contains bereits (Microsoft-Erfindung).

Mathias

[minicrispie]

Hallo,

Firefox kennt contains nicht, aber die Beispielseite enthält die Funktion für Firefox »nachgerüstet« über prototypische Erweiterung von Node. Diese musst du auch übernehmen. Andere Browser kennen contains bereits (Microsoft-Erfindung).

Naja, ich hab das Problem jetzt durch Links gelöst. Also kein MouseOver und -Out. Dabei hab ich das ganze noch in OOP geschrieben und meine JS-Kentnisse verbessert. Trotzdem Danke für das Beispiel!

Das mit der prototypische Erweiterung versteh ich trotzdem nicht. Im Quelltext seh ich keine. Wie meinst du das?

MfG. Christoph Ludwig

[molily]

Das mit der prototypische Erweiterung versteh ich trotzdem nicht. Im Quelltext seh ich keine.

if (window.Node && Node.prototype && !Node.prototype.contains) {  
	Node.prototype.contains = function (arg) {  
		return !!(this.compareDocumentPosition(arg) & 16);  
	};  
}

Heißt soviel wie:
»Wenn DOM-Knoten nicht die Methode contains besitzen, dann lege eine solche an: ...«
compareDocumentPosition habe ich mal hier erklärt: </archiv/2008/8/t175416/#m1153436>

Mathias

[minicrispie]

Hallo,

»» [...] Im Quelltext seh ich keine.

if (window.Node && Node.prototype && !Node.prototype.contains) {

Node.prototype.contains = function (arg) {
return !!(this.compareDocumentPosition(arg) & 16);
};
}

  
hmmm ... verdammt ... wieso hab ich das stückchen nicht gesehn?  o.O  
  
  

> Heißt soviel wie:  
> »Wenn DOM-Knoten nicht die Methode contains besitzen, dann lege eine solche an: ...«  
> compareDocumentPosition habe ich mal hier erklärt: </archiv/2008/8/t175416/#m1153436>  
  
cool ... schon wieder was neues :)  
thx  
  
  
MfG. Christoph Ludwig

-- 
Wo die Sprache aufhört, fängt die Musik an...  
Selfcode:  sh:) fo:) ch:° rl:( br:^ n4:} ie:{ mo:} va:) js:| de:] zu:) fl:( ss:| ls:~  
  
Go to [this](http://pc-labor.hn.vc/Homepage/index.php) 

[Markus**]

Hallo,

Frohe Ostern!

Jedesmal, wenn ich über diese Elemente fahre, dann wird die einklapp-funktion ausgelöst. Ich weis nicht, woran es liegt. Könnt ihr mir helfen?

Ich habe im "langeweile an den Ostertagen"-Thread einen Link zu einem Script geposted, der sich mit den Javascript Eventhandlern befasst. OnMouseDown, OnMouseMove, OnMouseUp. Ist zwar nicht OnMouseOver und Out, aber das Grundlegende Problem liegt in der Funktion der Eventhandler. Befasse Dich mit ihnen und natürlich auch mit deren Funktion und Implementierung in den Browsern. Als Inspiration kannst Du in meinem Script sehen, wie ich feststelle ob ich ein bestimmtes Element angeklickt habe, oder eben nicht!

Gruß, Markus**

[molily]

  	function ausklappen( obj )  
  	{  
  		if( obj.getElementsByTagName("div")[1].style.opacity == 0 )  
  		{  
  			obj.getElementsByTagName("div")[1].style.height = obj.getAttribute("title") + "px";  
  			einblenden( obj.getElementsByTagName("div")[1], 0 );  
  		}  
  	}  

Kleiner Tipp: Vermeide Wiederholungen. Du führst hier in drei aufeinanderfolgenden Zeilen dreimal »obj.getElementsByTagName("div")[1]« und zweimal »obj.getElementsByTagName("div")[1].style« aus. Das kostet Performance und ist schlecht lesbar. Besser du speicherst das Ergebnis in Variablen zwischen:

function ausklappen (section) {  
   var contentDiv = obj.getElementsByTagName("div")[1];  
   var style = contentDiv.style;  
   if (style.opacity == 0) {  
      style.height = section.title + "px";  
      einblenden(contentDiv, 0);  
   }  
}

Mathias

[minicrispie]

Hallo,

[...] Besser du speicherst das Ergebnis in Variablen zwischen:

Jupp. Das hab ich schon in meiner OOP-Variante mit einbezogen.

MfG. Christoph Ludwig