Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 09.10.2009, 16:25
SchlechterInformatiker SchlechterInformatiker ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 15
SchlechterInformatiker befindet sich auf einem aufstrebenden Ast
Standard EventHandler: Reihenfolge und Abbruch der Verarbeitung (capture,bubble)

Hallo,
ich habe eine Tabelle und möchte, dass ein Tooltip erscheint, wenn sich der Mauszeiger eine gewisse Zeit über einer der Tabellen-Zellen (das <TD>) befindet. Das Tooltip soll verschwinden wenn der Mauszeiger die Tabellen-Zeile (das <TR>) verlässt, nicht aber wenn der Mauszeiger von einer Spalte in eine andere fährt.

Ich habe bereits viel mit den Funktionen "stopPropagation()" und "addEventListener(...)" experimentiert, indem ich den dritten Parameter auf "true" bzw. "false" gestetzt habe, um die EventHandler anzumelden, nachdem ich den Thread http://xhtmlforum.de/45740-events-ve...-berladen.html gelesen habe. Aber ich komme nicht weiter.

Weiß jemand wie ich diese Funktionen richtig kombinieren muss um das gewünschte Ergebnis zu erhalten?

Oder gibt es vielleicht eine Möglichkeit, den "onmouseover" Event der nächsten Spalte auszulösen und abzufangen bevor das "onmouseout" Event der aktuellen Spalte ausgelöst wird? Dann könnte ich mit einer globalen Variable herausfinden, ob die Quelle des nächsten Events wieder eine Spalte derselben Tabelle ist oder ob der Mauszeiger die Tabelle verlassen hat.

Oder bin ich total auf dem Holzweg? Oder ist das was ich möchte gar nicht möglich?

Hier ein Beispiel:

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <body onload="init();">
  <script type="text/javascript">
   var timeout;
   var vorherigeSpalte = "";
   function init()
   {
     document.getElementById("Spalte1").addEventListener("mouseout",spalteVerlassen,false);
     document.getElementById("Spalte2").addEventListener("mouseout",spalteVerlassen,false);
     document.getElementById("Zeile1").addEventListener("mouseout",tabelleVerlassen,false);

     document.getElementById("Spalte1").addEventListener("mouseover",initToolTip,false);
     document.getElementById("Spalte2").addEventListener("mouseover",initToolTip,false);

     document.getElementById("ToolTip").firstChild.nodeValue = "";
   }
   function tabelleVerlassen(e)
   {
     //Hierzu kommt es nicht wegen e.stopPropagation() in der Funktion spalteVerlassen(e)
     //Wenn ich e.stopPropagation jedoch weglasse, verschwindet das Tooltip immer, was wiederum auch nicht erwünscht ist
     window.clearTimeout(timeout);
     document.getElementById("ToolTip").style.visibility = "hidden";	
   }
   function spalteVerlassen(e)
   {
     e.stopPropagation();
   }
   function initToolTip(e)
   {
     document.getElementById("ToolTip").firstChild.nodeValue = "Info zu " + e.target.id;
     if((vorherigeSpalte == "Spalte1" && e.target.id == "Spalte2") || (vorherigeSpalte == "Spalte2" && e.target.id == "Spalte1"))
     {
       //NICHT verstecken!
     }
     else
     {
       document.getElementById("ToolTip").style.visibility = "hidden";
       window.clearTimeout(timeout);
       timeout = window.setTimeout("zeigeToolTipAn()",1000);  
     }
     vorherigeSpalte = e.target.id;
   }
   function zeigeToolTipAn()
   {
     document.getElementById("ToolTip").style.visibility = "visible";
   }
  </script>
  <table cellspacing="0" cellpadding="0">
   <tbody>
     <tr id="Zeile1">
      <td id="Spalte1" style="border-width:1px;border-style:solid;width:100px;height:100px;text-align:center;">
       Spalte1
      </td>
      <td id="Spalte2" style="border-width:1px;border-style:solid;width:100px;height:100px;text-align:center;">
       Spalte2
      </td>
     </tr>
    </tbody>
   </table>
   <div id="ToolTip" style="width:50px;height:40px;left:200px;top:200px;background-color:red;visibility:hidden;">
   </div>
 </body>
</html>
Mit Zitat antworten
Sponsored Links