Probleme mit onmouseout - JavaScript

Elvis_M16 · 6. November 2009, 16:14

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-Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.div1 {
width: 450px;
height: 100px;
background: #fc0;
}
.div1.active {
height: 350px;
background: #dd0;
}
</style>
<script language="JavaScript">
var offen=0;
function display(o)
{
if (offen == 0) {
o.parentNode.className += " active";
offen = 1;
}
else {
o.parentNode.className = "div1";
offen=0;
}
}
function aus()
{
document.getElementById("div1").className = "div1";
}
</script>
</head>
<body>
<div class="div1" id="div1" onmouseout="aus()">
<a href="#" class="Link" onclick="display(this)">CLICK</a>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
</div>
</body>
</html>

Alles anzeigen

Grüße
Elvis

Dominic · 7. November 2009, 10:10

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.

Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.div1 {
width: 450px;
height: 150px;
background: #fc0;
}
</style>
</head>
<body>
<div class="div1" id="div1" onmouseout="alert('ein simpler test')">
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
</div>
</body>
</html>

Alles anzeigen

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

umt · 7. November 2009, 11:03

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:

Quellcode

<div class="div1" id="div1" onmouseout="t=setTimeout('machWas()',300);">
<ul>
<li onmouseover="clearTimeout(t);">Punkt1</li>
<li onmouseover="clearTimeout(t);">Punkt2</li>
</ul>
</div>

Was besseres fällt mir dazu gerade auch nicht ein.

Dominic · 7. November 2009, 12:57

Hey,

daran liegt es nicht.

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

Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.div1 {
width: 450px;
height: 250px;
background: #fc0;
}
.div1.active {
height: 350px;
background: #dd0;
}
</style>
</head>
<body>
<div class="div1" id="div1" onmouseover="this.className='div1 active'" onmouseout="this.className='div1'">
<div style="width:100px; height: 100px; background: blue;">
</div>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
</div>
</body>
</html>

Alles anzeigen

Es muss also an was anderem liegen...

umt · 7. November 2009, 15:22

Stimmt, du hast recht.
Warum kann man das eine machen, aber das andere nicht?
Merkwürdig ... sehr merkwürdig ...

Dominic · 7. November 2009, 19:32

Hey,

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

Elvis_M16 · 8. November 2009, 09:47

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

Dominic · 8. November 2009, 12:57

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

Elvis_M16 · 8. November 2009, 13:04

Hi Dominik,

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

Quellcode

...
<script language="JavaScript">
var offen=0;
function display(o)
{
if (offen == 0) {
o.parentNode.className += " active";
offen = 1;
}
else {
o.parentNode.className = "div1";
offen=0;
}
}
function aus()
{
document.getElementById("div1").className = "div1";
}
</script>
<div class="div1" id="div1" onmouseout="timerID = setTimeout('aus()', 3000)">
<a href="#" class="Link" onclick="display(this)">CLICK</a>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
</div>

Alles anzeigen

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 · 8. November 2009, 13:40

Wie meinst du das mit "hab ich mir nicht ausgedacht"? Hast du eine Aufgabenstellung?

Elvis_M16 · 9. November 2009, 16:39

Dominic schrieb:

Wie meinst du das mit "hab ich mir nicht ausgedacht"? Hast du eine Aufgabenstellung?

Leider ja!
Mir würde es onclick auch reichen...

Dominic · 10. November 2009, 07:36

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

Elvis_M16 · 10. November 2009, 09:01

Dominic schrieb:

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

Elvis_M16 · 12. November 2009, 10:54

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-Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.nticker {
width: 450px;
height: 100px;
background: #fc0;
overflow: hidden;
}
.nticker.active {
height: 400px;
width: 450px;
background: #dd0;
}
</style>
<script language="JavaScript">
//
var ntopen=0,ntout=0,ntover=0;
function displaynt(obj){
if (ntopen == 0) {
ntout=0;
ntover=1;
obj.parentNode.className += " active";
ntopen = 1;
document.getElementById("ntmore").innerHTML = "zuklappen";
}
else {
ntaus();
}
return false;
}
function ntaus(){
ntout++;
if(ntout==ntover&&ntopen==1){
document.getElementById("nticker").className="nticker";
ntopen=0;
document.getElementById("ntmore").innerHTML="mehr...";
}
}
</script>
</head>
<body>
<div class="nticker" id="nticker" onmouseout="setTimeout('ntaus()', 300)" onmouseover="ntover++;">
<a href="#" class="Link" id="ntmore" onclick="displaynt(this)">aufklappen</a>
<ul>
<li><a href="#">Punkt 1</a></li>
<li><a href="#">Punkt 2</a></li>
<li><a href="#">Punkt 3</a></li>
<li><a href="#">Punkt 4</a></li>
<li><a href="#">Punkt 5</a></li>
<li><a href="#">Punkt 6</a></li>
<li><a href="#">Punkt 7</a></li>
<li><a href="#">Punkt 8</a></li>
<li><a href="#">Punkt 9</a></li>
<li><a href="#">Punkt 10</a></li>
</ul>
</div>
</body>
</html>

Alles anzeigen

Probleme mit onmouseout - JavaScript

Probleme mit onmouseout - JavaScript

HTML-Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Dominic schrieb:

Dominic schrieb:

HTML-Quellcode

Teilen

Benutzer online 1

Tags