DOM 1/2 Eventmanagement

[Marc Plogas]

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.

mit DOM 1 sieht das interessante Stück quellcode so aus:

[snip]
window.onload = function () {

//erstmal wurschteln wir uns bis zum zielcontainer(linkbox) vor und konzentrieren uns da auf die span's
    if (document.getElementById)
        var x = document.getElementById('linkbox').getElementsByTagName('SPAN');
 else if (document.all)
  var x = document.all['linkbox'].all.tags('SPAN');
 else return;

for (var i=0;i<x.length;i++) {
        var tip, pred;//pred = vorg&auml;nger von tip

x[i].onmouseover = function () {

if (pred != undefined) {
                pred.style.visibility = 'hidden';
                clearTimeout(off);
            }

tip = document.getElementById(this.id+'_tip');
            pred = tip;
            tip.style.visibility='visible';
            off = setTimeout(function (){tip.style.visibility='hidden'},2000);
            tip.onmouseover = function() {if (off) clearTimeout(off)};
            tip.onmouseout = function() {
                tip.style.visibility='hidden' //irgendwie buggy... der mozi meint es etwas zuuuuu gut mit dem mouseout :/
            };
        }
    }
}
[snap]

Bei meinem DOM 2 Versuch hab ich - testweise - natürlich mit dem EventListener rumgespielt...

[snip]
off = setTimeout(function (){tip.style.visibility='hidden'},2000);
            //oke jetzt mal etwas fieser  mit beiden DOM types... nicht gut aber kein anderer weg @01:30am
            if (document.addEventListener) {
                tip.addEventListener('mouseover', function() {if (off) clearTimeout(off)},false);
                tip.addEventListener('mouseout', function() {tip.style.visibility='hidden'},true);
            } else {
                tip.onmouseover = function() {if (off) clearTimeout(off)};
                tip.onmouseout = function() {tip.style.visibility='hidden'}; //der Mozi meints zuuu gut mit dem timeout hier
            }
[snap]

Nun zu meinem Problem. Warum feuert der Mozilla das mouseout während ich mich noch auf dem Element tip befinde?
Das passende Stück HTML ist hier:

[snip]
<div id="1_tip" class="tooltip tooltext">this is for private purposes only.<br>don't try it unless u r me :)</div>
[snap]

Da ist also kein weiteres Element drin, wg capturing/bubbeling fehlern.
Tja IE macht es, Opera macht es... Mozi nicht *heul*
Wie soll ich denn meine Seite betrachten wenn es meine Browser nicht macht. Momentan hab ich ein Workaround mit einem Timer geschrieben.

cheers
Marc

[nobody]

ohne deinen code richtig gelesen zu haben (nur überflogen), versuchst du mit der verteilermethode zu arbeiten, wie im alten java.
hier muß man dann alles selbst per fuß verfolgen.
zudem ist dom in den browsern unterschiedlich.

warum bindest du das onMouseover nicht direkt an das html und rufst dort eine funktion(this) auf, welche die 2.ebene einblendet?

[Marc Plogas]

warum bindest du das onMouseover nicht direkt an das html und rufst dort eine funktion(this) auf, welche die 2.ebene einblendet?

Weil es das Problem nicht löst, das mouseout feuert trotzdem zu sensibel unter Mozilla.
Eine weitere Sache ist die Trennung von JS und HTML die ich dadurch natürlich nicht mehr einhalten würde. Und Ornung muss schliesslich sein ;)

Grüße
Marc

[nobody]

Eine weitere Sache ist die Trennung von JS und HTML die ich dadurch natürlich nicht mehr einhalten würde. Und Ornung muss schliesslich sein ;)

das kann ich leider nicht nachvollziehen.
mein HTML und JS stehen eh in separaten dateien. JS lasse ich dann vom Browser nachladen.

[molily]

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

[Marc Plogas]

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.

Hallo Matthias, danke für die Mühe die Du Dir mit dem Testen gemacht hast. ich habe nun auch mal Deinen Testcode ausgeführt und habe dort gleiches Problem wie beschrieben. Wenn ich z.B. auf den sub von bla4 gehe wird zwar der timeout abgebrochen, aber mein firefox (v.0.80 auf wXP pro) feuert, sobald ich mit der maus darüber bin das mouseout ab.

Ich denke das ist vllt ein Firefox Quirk, wie gesagt und Opera und IE gibt es diese Probleme nicht.

Der off-Timeout ist doch angebracht.

ich meinte dass ich es jetzt so realisiert hab:

[snip]
tip.onmouseout = function() {
                off = setTimeout(function (){tip.style.visibility='hidden'},5000);
};
[snap]

Vllt. kannst du das ja irgendwie bestätigen. Oder mir sagen, dass es nur mit meinem Firefox so ist. Dann kann ich damit leben, andere sollen die Seite ja sehen. Ich kenn sie ja mittlerweile :D

Marc

[molily]

Hallo,

ich habe nun auch mal Deinen Testcode ausgeführt und habe dort gleiches Problem wie beschrieben. Wenn ich z.B. auf den sub von bla4 gehe wird zwar der timeout abgebrochen, aber mein firefox (v.0.80 auf wXP pro) feuert, sobald ich mit der maus darüber bin das mouseout ab.

Seltsam. Ich kann es weder mit Firefox 0.8 unter Windows 98 noch mit Firefox 0.9 unter Linux nachvollziehen.

Vllt. kannst du das ja irgendwie bestätigen. Oder mir sagen, dass es nur mit meinem Firefox so ist.

Anscheinend. Hast du einmal untersucht, ob es bei anderen, frisch installierten Firefox-Versionen und eventuell Mozilla-Versionen ebenfalls auftritt? Ich habe keine Idee, woran es liegen könnte.

Mathias