Probleme mit onmouseout - JavaScript

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Probleme mit onmouseout - JavaScript

    Hallo Leute,

    mein Problem kurz erläutert:

    Per JavaScript wird einer Klasse (div1) onclick der Zusatz "active" angehängt, der für diese div andere css-Definitionen hat. Dieses kann auch onclick wieder rückgängig gemacht werden.

    Das funktioniert soweit!!!

    Nun soll allerdings auch der aktive Zustand (div1 active) bei onmouseout wieder in den Urzustand (div1) gesetzt werden. Das funktioniert nicht wirklich gut, da bei der Ausführung dieses
    Events eine Art "flackern" auftritt. D.h. sobald ich die Maus nur geringfügig bewege, wird das Event ausgelöst. Wie kann ich das unterbinden?
    (Die Funktion "aus()" ist momentan nur testweise eingebunden - daher nicht so elegant).

    Langer Rede, kurzer Code:

    HTML Source Code

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    5. <title>Untitled Document</title>
    6. <style type="text/css">
    7. .div1 {
    8. width: 450px;
    9. height: 100px;
    10. background: #fc0;
    11. }
    12. .div1.active {
    13. height: 350px;
    14. background: #dd0;
    15. }
    16. </style>
    17. <script language="JavaScript">
    18. var offen=0;
    19. function display(o)
    20. {
    21. if (offen == 0) {
    22. o.parentNode.className += " active";
    23. offen = 1;
    24. }
    25. else {
    26. o.parentNode.className = "div1";
    27. offen=0;
    28. }
    29. }
    30. function aus()
    31. {
    32. document.getElementById("div1").className = "div1";
    33. }
    34. </script>
    35. </head>
    36. <body>
    37. <div class="div1" id="div1" onmouseout="aus()">
    38. <a href="#" class="Link" onclick="display(this)">CLICK</a>
    39. <ul>
    40. <li>Punkt 1</li>
    41. <li>Punkt 2</li>
    42. <li>Punkt 3</li>
    43. </ul>
    44. </div>
    45. </body>
    46. </html>
    Display All


    Grüße
    Elvis
  • Hey,

    dein Flackern kommt davon, das du über die UL-Elemente fährst und dann wieder verlässt. Das wundert mich zwar, aber es ist so.

    Source Code

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    5. <title>Untitled Document</title>
    6. <style type="text/css">
    7. .div1 {
    8. width: 450px;
    9. height: 150px;
    10. background: #fc0;
    11. }
    12. </style>
    13. </head>
    14. <body>
    15. <div class="div1" id="div1" onmouseout="alert('ein simpler test')">
    16. <ul>
    17. <li>Punkt 1</li>
    18. <li>Punkt 2</li>
    19. <li>Punkt 3</li>
    20. </ul>
    21. </div>
    22. </body>
    23. </html>
    Display All


    Bewegst du deine Maus im unterem Bereich pasiert nichts. Schiebst du Sie dann aber in deinen Oberen bereich, wo deine <li>-Elemente sind, verläst du die div-Box. Kannst du ja testen...

    Wobei ich das auch sehr seltsam finde, wenn du eine Lösung dazu findest (die Ursache hast du jetzt ja) würde sie mich sehr interresieren.

    Gruß,
    Dominic
    My lovely mister singing club...
  • Ja, das ist so.

    Wenn du ein Child Element überfährst wird ein onmouseover dieses Elements gefeuert und damit bist du beim parent onmouseout.
    Du kannst das verhindern, indem du das onmouseout etwas verzögerst (z.B. 300ms) und den Timeout in einem onmouseover des eingebetteten Elementes löschst.
    Beispiel:

    Source Code

    1. <div class="div1" id="div1" onmouseout="t=setTimeout('machWas()',300);">
    2. <ul>
    3. <li onmouseover="clearTimeout(t);">Punkt1</li>
    4. <li onmouseover="clearTimeout(t);">Punkt2</li>
    5. </ul>
    6. </div>


    Was besseres fällt mir dazu gerade auch nicht ein.
    netzonaut.de - Ein Blog zu den Themen Internet, Webentwicklung, Linux und OpenSource-Software
    jexlab.net - Webentwicklung zu fairen Konditionen
  • Hey,

    daran liegt es nicht.

    Das hier funktioniert auch - und es sind verschiedene elemente drin.

    Source Code

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    5. <title>Untitled Document</title>
    6. <style type="text/css">
    7. .div1 {
    8. width: 450px;
    9. height: 250px;
    10. background: #fc0;
    11. }
    12. .div1.active {
    13. height: 350px;
    14. background: #dd0;
    15. }
    16. </style>
    17. </head>
    18. <body>
    19. <div class="div1" id="div1" onmouseover="this.className='div1 active'" onmouseout="this.className='div1'">
    20. <div style="width:100px; height: 100px; background: blue;">
    21. </div>
    22. <ul>
    23. <li>Punkt 1</li>
    24. <li>Punkt 2</li>
    25. <li>Punkt 3</li>
    26. </ul>
    27. </div>
    28. </body>
    29. </html>
    Display All


    Es muss also an was anderem liegen...
    My lovely mister singing club...
  • Hallo Leute!

    Die Sache mit dem Timeout hab ich mir auch schon überlegt. Werde ich gleich mal testen...

    was ist denn dein genaues Ziel? Eventuell kriegen wir dann ja ein Workaround hin...


    Ziel ist es, eine div, die im inaktiven Zustand z.B 3 Listenelemente enthält onClick zu erweitern, so dass dann z.B. 12 Elemente zu sehen sind. Das Ding soll sowohl onClick ,
    als auch onmouseout wieder "zuklappen".

    Die onklick-Geschichte ist auch kein Problem. Nur beim onmmouseout hab ich eben dieses Flackern.

    Grüße
    Elvis
  • Hey,

    das Flackern kommt davon, das du kein onmouseover event hast. Warum lässt du die Box nicht einfach nach einem timeout von ein paar Sekunden von alleine schließen?
    Programmablauf:
    onclick -> der Benutzer möchte die Box sehen, sie wird geöffnet
    im JavaScript setzt du einen timeout von z.B. 30 sekunden. Wenn die 30 Sekunden abgelaufen sind, geht die Box zu.

    Alternativ kann man nach den 30 Sekunden prüfen ob die Maus noch in dem Feld ist oder nicht und entsprechend weiter handeln...


    Ich selber würde als User die Box aber lieber selber öffnen und schließen können. Wenn die Box von alleine zu geht, hat das was nerviges, finde ich...

    Gruß,
    Dominic
    My lovely mister singing club...
  • Hi Dominik,

    hab's jetzt testweise über ein timeout gelöst:

    Source Code

    1. ...
    2. <script language="JavaScript">
    3. var offen=0;
    4. function display(o)
    5. {
    6. if (offen == 0) {
    7. o.parentNode.className += " active";
    8. offen = 1;
    9. }
    10. else {
    11. o.parentNode.className = "div1";
    12. offen=0;
    13. }
    14. }
    15. function aus()
    16. {
    17. document.getElementById("div1").className = "div1";
    18. }
    19. </script>
    20. <div class="div1" id="div1" onmouseout="timerID = setTimeout('aus()', 3000)">
    21. <a href="#" class="Link" onclick="display(this)">CLICK</a>
    22. <ul>
    23. <li>Punkt 1</li>
    24. <li>Punkt 2</li>
    25. <li>Punkt 3</li>
    26. </ul>
    27. </div>
    Display All


    Man kann ja als User die Box per Klick öffnen und schließen. Die Anforderung mit dem Mouseout hab ich mir nicht ausgedacht...

    Grüße
  • Dominic wrote:

    Hey,

    ich hab da noch eine Idee gerade:
    Wenn du von anfang an einen onmouseover setzt funktioniert es ja. Du bei mouseover ja eine Variable setzten das er es nicht gleich Schließen soll (300ms) oder irgendetwas ähnliches...
    Mal schaun, ob ich das im Laufe des Tages dir noch in HTML darstellen kann...

    Gruß,
    Erasel


    Danke für den Tipp! Werde gleich mal versuchen, eine weitere Variable zu setzen, die das zuklappen verhindert.
    Code gibt's dann umgehend...

    Danke & Gruß
    Elvis
  • Hi!

    Hab jetzt eine (wenn auch etwas abenteuerliche) Lösung:

    Ich zähle die onmouseover und onmouseout-Events, wenn sich der Cursor innerhalb der Div befindet. Solange diese nicht gleich sind,
    bleibt der Zustand "aktiv". Beim Verlassen der Div sind beide Events gleich und der Zustand ändert sich:

    HTML Source Code

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    5. <title>Untitled Document</title>
    6. <style type="text/css">
    7. .nticker {
    8. width: 450px;
    9. height: 100px;
    10. background: #fc0;
    11. overflow: hidden;
    12. }
    13. .nticker.active {
    14. height: 400px;
    15. width: 450px;
    16. background: #dd0;
    17. }
    18. </style>
    19. <script language="JavaScript">
    20. //
    21. var ntopen=0,ntout=0,ntover=0;
    22. function displaynt(obj){
    23. if (ntopen == 0) {
    24. ntout=0;
    25. ntover=1;
    26. obj.parentNode.className += " active";
    27. ntopen = 1;
    28. document.getElementById("ntmore").innerHTML = "zuklappen";
    29. }
    30. else {
    31. ntaus();
    32. }
    33. return false;
    34. }
    35. function ntaus(){
    36. ntout++;
    37. if(ntout==ntover&&ntopen==1){
    38. document.getElementById("nticker").className="nticker";
    39. ntopen=0;
    40. document.getElementById("ntmore").innerHTML="mehr...";
    41. }
    42. }
    43. </script>
    44. </head>
    45. <body>
    46. <div class="nticker" id="nticker" onmouseout="setTimeout('ntaus()', 300)" onmouseover="ntover++;">
    47. <a href="#" class="Link" id="ntmore" onclick="displaynt(this)">aufklappen</a>
    48. <ul>
    49. <li><a href="#">Punkt 1</a></li>
    50. <li><a href="#">Punkt 2</a></li>
    51. <li><a href="#">Punkt 3</a></li>
    52. <li><a href="#">Punkt 4</a></li>
    53. <li><a href="#">Punkt 5</a></li>
    54. <li><a href="#">Punkt 6</a></li>
    55. <li><a href="#">Punkt 7</a></li>
    56. <li><a href="#">Punkt 8</a></li>
    57. <li><a href="#">Punkt 9</a></li>
    58. <li><a href="#">Punkt 10</a></li>
    59. </ul>
    60. </div>
    61. </body>
    62. </html>
    Display All