Einzelnen Beitrag anzeigen
  #5 (permalink)  
Alt 23.12.2011, 09:22
Schmeily Schmeily ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 22.12.2011
Beiträge: 2
Schmeily befindet sich auf einem aufstrebenden Ast
Standard Lösung gesucht

Fast hätte ich gedacht mit dem vorherigem Post eine Lösung für mein Problem gefunden zu haben. Dem ist leider nicht so.
Vielleicht hab ich ein Brett vorm Kopf und einer von Euch sieht die Lösung sofort.

Also hier das Problem:
Mouseover auf dem äußerem DIV (rot) löst ein Event aus und Mouseout auch.
Bei hover über blau und grün soll nichts passieren. In CSS klappt das alles. Da das Ganze aber noch etwas chicker werden soll (Fading) kommt Javascript in Spiel. So werden bei Mouseover und Mouseout auf blau und grün ungewollter Weise fadein und fadeout ausgelöst. Wie kann man das abstellen?
Hat jemand eine Idee??? Wäre prima!
So, und nun wünsche ich Euch ein frohes Fest und einen guten Rutsch ins neue Jahr!

Hier kurz der Quellcode:

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>stop bubbling</title>

<script language="JavaScript"> 
var EvtCount = 0;


function onclickB(e) {
	if (!e) var e = window.event //MSIE
		EvtCount++;
        alert("rot rein - Eventnr.: " + EvtCount);
        e.cancelBubble=true;
        e.stopPropagation();
        return true;
}

function onclickBO(e) {
	if (!e) var e = window.event //MSIE
		EvtCount++;
        alert("rot raus - Eventnr.: " + EvtCount);
        e.cancelBubble=true;
        e.stopPropagation();
        return true;
}

function onloadH() {
	elb = document.getElementById("b")
	if (elb.addEventListener) {
		elb.addEventListener("mouseover", onclickB, false);
		elb.addEventListener("mouseout", onclickBO, false);
	}
	else if (elb.attachEvent){
		elb.attachEvent("mouseover", onclicB);
		elb.attachEvent("mouseout", onclickBO);
	}
	return true;
}
</script>


</head>
<body onload="onloadH()">
	<div id="b" style="width:200px; height:200px; background:red">
		<div id="a" style="width:100px; height:50px; background:blue;color:#ffffff;margin:10px 0 0 10px;top:50px">mache nichts</div>
		<div id="c" style="width:100px; height:50px; background:green;color:#ffffff;margin: 0 0 0 10px">mache nichts</div>
	</div>


</body>
</html>
Mit Zitat antworten