nicht angemeldet
Hallo,
Ich habe folgendes Problem: Wenn ich zwei <div></div> ineinander verschachtle und dem äußeren einen mouseover Event zuweise dann feuert auch der innere einen mouseover. Nach einiger Suche, bin ich darauf gekommen, dass das mit dem Eventbubbling zu tun hat. Ein schönes Beispiel, das mir sehr geholfen hat ist hier zu finden:
http://forum.de.selfhtml.org/archiv/2005/12/t119761/
Jetzt habe ich dieses Beispiel leicht abgeändert und die <div>'s mit css formatiert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title></title>
<script type="text/javascript">
function log (message) {
if (typeof log.t == "undefined")
log.t = document.getElementById("t");
log.t.value = log.t.value + message + "\n";
}
function over (event) {
var target = event.target || event.srcElement || false;
var fromElement = event.relatedTarget || event.fromElement || false;
if (target.id == "outer" && fromElement.id != "inner") {
log("over target: " + target.id + " from: " + fromElement.id);
} else {
log("over target: " + target.id + " from: " + fromElement.id);
}
}
function out (event) {
var target = event.target || event.srcElement || false;
var toElement = event.relatedTarget || event.toElement || false;
if (target.id == "outer" && toElement.id != "inner") {
log("out target: " + target.id + " to: " + toElement.id);
} else {
log("out target: " + target.id + " to: " + toElement.id);
}
}
</script>
<style type="text/css">
#outer {background-color:#000000; position: absolute; top: 50px; left: 600px;}
#inner {background-color:#c0c0c0; position: absolute; top: 0px; left: 0px; width:150px; height: 20px;}
</style>
</head><body id="body">
<div id="outer" onmouseover="over(event)" onmouseout="out(event)">
<div id="inner">
</div>
</div>
<p><textarea id="t" cols="60" rows="25"></textarea></p>
</body>
</html>
nun bekomme ich als Event nurnoch ein mouseover/mouseout ausgelößt vom inneren <div>.
Wie kann das sein?? Müssten nich zumindest beide <div>'s feuern?
Ich möchte eigentlich nur wissen, wann der Mauszeiger in den äußeren <div> eindringt bzw. diesen wieder verlässt!!
Vielen Dank,
Peter