nicht angemeldet
Events im div: bug im IE 5.5 / 6 ?
hi,
mir ist im IE 5.5 / 6 PC etwas Seltsames aufgefallen, dass mich zu der
Frage verleitet, ob MS seine Produkte wirklich verbessert.
Ein dhtml Menue besteht aus verschachtelten div-layern, mit denen
Text/Bilder formatiert werden. _Darueber_ liegt passgenau ein leeres div,
das ausschliesselich events registrieren soll.
Dieses Prinzip funktioniert auf IE4/5, NC4/6 und Mozilla 19 am PC,
IE5 am Mac(wenn zusaetzlich zIndex gesetzt wird) sowie NC4 Mac/Linux.
Bei IE 5.5 / 6 feuert z. B. mouseout dann, wenn unterhalb des
eventregistrierenden divs ein anderes div liegt - Wohlgemerkt:
_unterhalb_!
Ich habe mal einen Test dranngehaengt, wo man dass Problem
nachvollziehen kann.
Abhilfe schafft ein leeres gif, das im eventregistrierenden div plaziert
wird (oder hintergrundfarbe setzen, was natuerlich sinnlos ist).
Koennt Ihr den Fehler nachvollziehen/bestaetigen, gibt es andere
workarounds - oder ist es gar ein feature ;-)
Gruesse Joachim
<html>
<head>
<style type="text/css">
#ebene0 {position:absolute; top:30px; left:30px; width:200px; height:20px; visibility:visible;clip:rect(0 200 20 0);layer-background-color:red;background-color:red;border:none;}
#touchIt {position:absolute; top:30px; left:30px; width:200px; height:20px; visibility:visible;clip:rect(0 200 20 0);}
#ebene1 {position:absolute; top:0px; left:30px; width:50px; height:16px; visibility:visible;}
#ebene2 {position:absolute; top:0px; left:100px; width:50px; height:16px; visibility:visible;}
</style>
<script language="javascript1.2">
var nc = !!(document.captureEvents && !document.documentElement);
var ie = !!document.all;
var ie4 = !!(!document.documentElement && document.all);
var dom = !!document.documentElement;
var nc6 = !!(dom && (!document.all));
var bgC = nc? 'bgColor' : 'backgroundColor';
function dRef(num)
{
return (nc? document.layers[num]:(ie4? document.all[num]:document.getElementById(num)))
}
function dRefS(num)
{
return (nc? document.layers[num]:(ie4? document.all[num].style:document.getElementById(num).style))
}
function init()
{
if(nc) document.touchIt.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
dRef('touchIt').onmouseover = on;
dRef('touchIt').onmouseout = off;
}
function on(e)
{
dRefS('ebene0')[bgC] = "green";
}
function off(e)
{
dRefS('ebene0')[bgC] = "red";
}
</script>
</head>
<body onload="init()">
<div id="ebene0">
<div id="ebene1">Dies ist</div>
<div id="ebene2">ein Test</div>
</div>
<div id="touchIt"></div>
</body>
</html>