✔ onmouseover- onmouseout- Problem.

rown · 22. Mai 2011

Hallo Leute,

nachdem ich es bis jetzt weitest gehend alleine geschafft habe mich durch das für mich neue Feld Java, HTML und co. zu kämpfen, setzt es nun aus. Es geht um ein onmouseover-, onmousedown-Problem. Auf meiner Testseite http://www.r-own.de ist ein rotes Rechteck auf grünem Grund zu sehen. Dieses rote Rechteck wird mittels einer durch onmouseover aufgerufenen Funktion gestaucht und gestreckt (Feinheiten später). Da der onmouseover-Bereich sich ja ändert habe ich ein MuttiDiv (das grüne Rechteck) drum herum gebaut, welches den mouseover-Bereich darstellt. Auf der linken Seite der Seite in der vorletzten Zeile steht, welche Funktion (over oder out) zuletzt durchlaufen wurde.
Meine Schwierigkeit: Das rote Rechteck bounced nicht nur wenn ich mit der Maus in den grünen Bereich hineinfahre (der ja der mouseover-Bereich ist), sondern auch wenn es wieder rausgeht. Ausser ich mache es sehr langsam. Und auch das rote Rechteck scheint bei einem mouseover die Funktion anzustoßen.

HTML:

<body onload="draginit(), CookieLesen()">

		<div id="drag_standby"> </div>
		
		<div id="red_mother" onmousedown="dragstart(this)" onmouseover="grow()" onmouseout="shrink()">
			<div id="red"></div>
		</div>
		<div id="green" onmousedown="dragstart(this)"> </div>
	
		<div id="ausgabe">
			<div id="ausgabe_red"></div>
			<div id="ausgabe_green"></div>
			<div id="ausgabe_cookie"> </div>
			<div id="ausgabe_1"> </div>
			<div id="ausgabe_2"> </div>
			<div id="ausgabe_3"> </div>
			<div id="ausgabe_4"> </div>
			<div id="ausgabe_5"> </div>
			<div id="ausgabe_6"> </div>
			<div id="ausgabe_7"> </div>
			<div id="ausgabe_8"> </div>
			<div id="ausgabe_9"> </div>
			<div id="ausgabe_10"> </div>
			<div id="ausgabe_11"> </div>
			<div id="ausgabe_12"> </div>
		</div>

	</body>

PHP:

var i = 0;


function grow () 
	{	
	if (i < (Math.PI*20))
		{
		document.getElementById("ausgabe_11").innerHTML = "";
		document.getElementById("ausgabe_11").innerHTML = "over";
		
		document.getElementById("red").style.width = ((-(Math.PI*30/i))*Math.sin(1/4*i) + 100) + "px"; 
		document.getElementById("red").style.height = (((Math.PI*30/i))*Math.sin(1/4*i) + 100) + "px";  
		i++;
		setTimeout("grow()",50);
		}
	
	document.getElementById("ausgabe_green").innerHTML = "i: " + i;
	}
	
function shrink ()
	{
	document.getElementById("ausgabe_11").innerHTML = "";
	document.getElementById("ausgabe_11").innerHTML = "out";
	
	i=0;
	}

Was nun mein Ziel ist, ist dass das Rechteck nur bounced, wenn ich reinfahre und dass das Rechteck nicht rumzappelt, wenn die Maus auf der rechten unteren Ecke steht.

Ich danke sehr für Hilfe und Anregungen.

viele Grüße
Rown

Parantatatam · 23. Mai 2011

Ich frag mich gerade, warum das eigentlich so gut funktioniert. Denn eigentlich dürften die Ereignisse nur in Kraft treten, wenn der Mauszeiger sich ausschließlich im Bereich des grünen Rechteckes befindet, aber nicht innerhalb des roten. Denn alles, was dort passiert, wird über Ereignisse des roten Rechteckes gelöst.

CPoly · 23. Mai 2011

einfach nur crack hat gesagt.:
Ich frag mich gerade, warum das eigentlich so gut funktioniert. Denn eigentlich dürften die Ereignisse nur in Kraft treten, wenn der Mauszeiger sich ausschließlich im Bereich des grünen Rechteckes befindet, aber nicht innerhalb des roten. Denn alles, was dort passiert, wird über Ereignisse des roten Rechteckes gelöst.

Eines der wichtigsten Themen im Umfeld von JavaScript ist Event-Bubbling. Grob gesagt wird bei einem Event eines Elementes für jedes Elternelement eben dieses auch ausgelöst (von unten nach oben, eben wie eine aufsteigende Blase). Deshalb bindet man bei komplexen Anwendungen die Events auch ausschließlich an das document-Objekt. Das übergebene Event-Objekt enthält in der "target" Eigenschaft (jeder Browser nennt das leider unterschiedlich...) das DOM-Element, welches tatsächlich für das Event verantwortlich war. Jede Station auf dem weg kann aber das weitere Bubbling stoppen.

Beispiel: (nur in Firefox getestet. Event handling ist mit Abstand das schlimmste Gebiet, wenn es um Cross-Browser Kompatibilität geht...)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Event bubbling</title>
</head>

<body>
	<div id="div1" style="width:100px;height:100px;background:red;"></div>
	
	<script type="text/javascript">
	/* <![CDATA[ */
		var div = document.getElementById('div1');
		
		document.onclick = function(evt) {
			alert('Document clicked. Target: ' + evt.target);
		};
		
		div.onclick = function(evt) {
			evt.cancelBubble = confirm('Div clicked. Cancel bubbling?');
		};
	/* ]]> */
	</script>
</body>

</html>

Zu dem anderen Problem mit dem Zappeln:
Der Grund dafür ist ja klar. Wenn das Div sich verkleinert, verschwindet es unter dem Mauszeiger. Wenn es dann wieder größer wird, kommt es wieder unter ihn und es wird natürlich das onmouseover Ereignis ausgelöst. Am einfachsten wäre eine Sperr-Variable, die das Event erst wieder frei gibt, wenn die Animation fertig ist.

Parantatatam · 23. Mai 2011

Danke CPoly für das Erklären. Da ich mich noch nicht so intensiv damit beschäftigt habe, war mir das erstmal unbekannt.

rown · 23. Mai 2011

Danke CPoly, das erklärt einiges. Nur noch die Frage, da ich schon daran gedacht hatte die Funktionen für eine gewisse Zeit zu unterbrechen, wie meinst du das mit der Sperr-Variablen?

Grüße
Rown

CPoly · 23. Mai 2011

Du nimmst eine Variable, zum Beispiel

Javascript:

//Gibt an ob gerade eine Animation läuft.
var isAnimating = false;

Diese setzt du natürlich so lange bis die Animation fertig ist. Während der Zeit ignorierst du einfach alle weiteren Maus-Events. Also z.B.

Javascript:

if(!isAnimating) {
    //...
}

Dafür musst du aber noch eine Kleinigkeit ändern, du musst neben "grow" noch eine weiter Funktion haben, denn sonst kommst du dir ja mit deinem setTimeout in die quere (Du kannst nicht unterscheiden, ob grow durch die Maus oder durch setTimeout ausgelöst wurde). Also nimm einfach eine extra Funktion "mouseover" innerhalb derer du prüfst ob isAnimating true ist und falls nicht, rufst du grow auf.

rown · 23. Mai 2011

Hallo und danke CPoly und hallo auch an alle anderen,

hier ist mein Stand der Dinge: http://www.r-own.de.
Die Boxen bounzen noch nicht, da das vorerst drittens ist. Wichtig ist mir gerade erstmal das "i" im Textbereich auf der rechten Seite, wenn man über "Auftragsarbeiten" fährt. Ich habe versucht das Problem wie vorgeschlagen zu lösen, weil es in meinem Kopf Sinn macht, aber leider ist die Funktionalität des daraus entstandene Scriptes alles andere als wie ich es mir in meinem Kopf vorstelle.

1. is_animating() wird nur bei Mousebewegung angesprochen und checkt daher nicht permanent ob var isAnimating true oder false ist. (Davon abgesehen glaube ich auch den Rechner vielzuviel und vielzuviel Unsinniges machen zu lassen)
2. Ist "document.getElementById("auftrag_bereich").disable = true;" der richtige Befehl um die Mouse-Events des "Auftragsbereiches" abzuschalten?
3. Da ich es ja nun nicht hinbekommen habe "i" nur einmal durchlaufen zu lassen, ist mir aufgefallen, dass "i" mit jedem Durchgang langsamer wird. Das ist kein Fehler, oder? Kann man das steuern?

HTML:

<head>
		<title>test0202</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
		<script src="js/dragdrop.js" type="text/javascript"></script>
		<script src="js/boxbounce.js" type="text/javascript"></script>
		<script src="js/cookies.js" type="text/javascript"></script>
	</head>


<body onload="drag_objects(), CookieLesen()">
	
	<div id="menu">
		<div id="auftrag_bereich" onmouseover="auftrag_bounce(), is_animating()">
			<div id="auftrag_titel">Auftragsarbeiten</div>
			<ul>
				<li><a href="index.php?link=project101">Personensammlung</a></li>
				<li><a href="index.php?link=project102">Tempo</a></li>
				<li><a href="index.php?link=project103">Pseudo-Universitäten</a></li>
				<li><a href="index.php?link=project104">Titelsucht</a></li>
				<li><a href="index.php?link=project105">Katalog</a></li>
				<li><a href="index.php?link=project106">Ritterorden</a></li>
				<li><a href="index.php?link=project107">Bemessungsgrundlage</a></li>
				
			</ul>
		</div><!-- close: bereich //--> 
		<div id="eigene_bereich">
			<div id="eigene_titel">eigene Projekte</div>
			<ul>
				<li><a href="index.php?link=project201">Parallelen</a></li>
				<li><a href="index.php?link=project202">Fiktive Wahrheiten</a></li>
				<li><a href="index.php?link=project203">Auto-Reparatur</a></li>
				<li><a href="index.php?link=project204">Doppelstunde</a></li>
				<li><a href="index.php?link=project205">Partyreihe</a></li>
				<li><a href="index.php?link=project206">Tanztanzhurra</a></li>
				<li><a href="index.php?link=project207">Rezensionen</a></li>
			</ul>
		</div><!-- close: bereich //-->
		<div id="sonstige_bereich">
			<div id="sonstige_titel">)( soviel! :]</div>
			<ul>
				<li><a href="index.php?link=start">Startseite</a></li>
				<li><a href="index.php?link=contact">Kontakt</a></li>
				<li><a href="index.php?link=impressum">Impressum</a></li>
			</ul>
		</div><!-- close: bereich //-->
		<div id="logo"></div>
		<div id="logo_foot"></div>
	</div><!-- close: menu //-->

		
	<div id="ausgabe">
			<div id="ausgabe_red"></div>
			<div id="ausgabe_green"></div>
			<div id="ausgabe_cookie"> </div>
			<div id="ausgabe_1"> </div>
			<div id="ausgabe_2"> </div>
			<div id="ausgabe_3"> </div>
			<div id="ausgabe_4"> </div>
			<div id="ausgabe_5"> </div>
			<div id="ausgabe_6"> </div>
			<div id="ausgabe_7"> </div>
			<div id="ausgabe_8"> </div>
			<div id="ausgabe_9"> </div>
			<div id="ausgabe_10"> </div>
			<div id="ausgabe_11"> </div>
			<div id="ausgabe_12"> </div>
	</div>

	</body>

PHP:

var i = 0;
var ii = 0;
var imax = 20;
var isAnimating = false; 

function auftrag_bounce() 
	{
	document.getElementById("ausgabe_9").innerHTML = "";		//Ausgabe
	document.getElementById("ausgabe_9").innerHTML = "Funktion: bounce()";	//Ausgabe
	if (i<imax)
		{
		isAnimating = true;
		i++;
		setTimeout("auftrag_bounce()",50);
		}
	else
		{
		i=0;
		isAnimating = false;
		}
	document.getElementById("ausgabe_4").innerHTML = "isAnimating = " + isAnimating;	//Ausgabe
	document.getElementById("ausgabe_1").innerHTML = "i: " + i;							//Ausgabe
	}
	
function is_animating ()
	{
	document.getElementById("ausgabe_9").innerHTML = "";			//Ausgabe
	document.getElementById("ausgabe_9").innerHTML = "Funktion: is_animating()";	//Ausgabe
	if (ii<imax+50)
		{
		if (isAnimating = true)
			{
			document.getElementById("ausgabe_3").innerHTML = "isAnimating = wahr";	//Ausgabe
			document.getElementById("auftrag_bereich").disable = true;				//Ausgabe
			}
		else
			{
			document.getElementById("ausgabe_3").innerHTML = "isAnimating = falsch";	//Ausgabe
			document.getElementById("auftrag_bereich").disable = false;					//Ausgabe
			}
		ii++;
		setTimeout("is_animating()",50);
		}
	document.getElementById("ausgabe_2").innerHTML = "ii: " + ii;		//Ausgabe
	}

So viele Zeile!
Falls jemand nochmal Lust und Muse hat mir auf die Sprünge zu helfen, wäre ich sehr dankbar.
Mein Ziel: "i" läuft einmal bei mouse-over durch und wird erst nach ungefähr 1sec. nach mouse-out wieder 0.

Vielen Danke
Rown

✔ onmouseover- onmouseout- Problem.

rown

Mitglied

Parantatatam

mag Cookies & Kekse

CPoly

Mitglied Weizenbier

Parantatatam

mag Cookies & Kekse

rown

Mitglied

CPoly

Mitglied Weizenbier

rown

Mitglied

Neue Beiträge