molily: DOM 1/2 Eventmanagement

Beitrag lesen

Hallo,

Es geht um meine Seite, auf der Menüpunkte sind, die beim Überfahren die 2.e Ebene preisgeben. Natürlich soll man dann auf den 2.en Layer kommen und dort die Menüpunkte auswählen können.

Nun zu meinem Problem. Warum feuert der Mozilla das mouseout während ich mich noch auf dem Element tip befinde?

Das kann ich nicht nachvollziehen, ich verstehe nicht, was du meinst. Solange sich die Maus auf dem tip-Layer befindet, verschwindet dieses nicht. Der Versteck-Timeout wird ja beim mouseover abgeschaltet und der mouseout wird bei mir auch nur dann gefeuert, wenn die Maus das Element verlässt.

Mein Testcode:

<html>
<head>
<style type="text/css">
span {background-color:red;}
#tips span {visibility:hidden;}
</style>
<script type="text/javascript">

var tip, pred;

function init () {
 if (document.getElementById) {
  var spanelemente = document.getElementById('linkbox').getElementsByTagName('span');
 } else if (document.all) {
    var spanelemente = document.all['linkbox'].all.tags('span');
   } else return;

for (var i=0;i<spanelemente.length;i++) {
  spanelemente[i].onmouseover = mover;
 }
}

function mover () {
 if (typeof(pred)!='undefined') {
  pred.style.visibility = 'hidden';
  clearTimeout(off);
 }
 tip = document.getElementById('tip_'+this.id);
 pred = tip;
 tip.style.visibility='visible';
 off = setTimeout("tip.style.visibility='hidden'", 2000);
 if (document.addEventListener) {
  tip.addEventListener('mouseover', function () {if (off) clearTimeout(off)}, false);
  tip.addEventListener('mouseout', function () {tip.style.visibility='hidden'}, false);
 } else {
  tip.onmouseover = function() {if (off) clearTimeout(off)};
  tip.onmouseout = function() {tip.style.visibility='hidden'};
 }
}

window.onload = init;
</script>
<head>
<body>

<div id="linkbox">
<span id="a1">bla1</span>
<span id="a2">bla2</span>
<span id="a3">bla3</span>
<span id="a4">bla4</span>
</div>

<div id="tips">
<span id="tip_a1">bla1</span>
<span id="tip_a2">bla2</span>
<span id="tip_a3">bla3</span>
<span id="tip_a4">bla4</span>
</div>

</body>
</html>

Momentan hab ich ein Workaround mit einem Timer geschrieben.

Der off-Timeout ist doch angebracht.

Mathias