onmouseout geht nur beim ersten mal???

[WernerK]

Hallo,
ich habe ein seltsames Problem mit dem IE7.
Folgender Code:

<select name="lis_Body" id="warn_lis_Body"  onchange="showDefTooltip(this.form.lis_Body.selectedIndex,this.form.lis_Body);" onmouseout="hideDefTooltip();">  
<option id="lis_Body_PTA" value="PTA" >Auto</option>  
<option id="lis_Body_Lr" value="Lr" >Lr</option>  
</select>

Die JS Function hideDefTooltip

  
function hideDefTooltip(){  
if(document.getElementById('tooltip')){  
varobj = document.getElementById('tooltip');  
varobj.style.display= 'none';  
}  
}//end function

Wenn man nun auf das Select Menü klickt bzw. einen anderen wert auswählt wird der Tooltip anezeigt. Wenn man nun das Select wieder verlässt, geht der Tooltip wie gewünscht weg.
Wiederholt man das ganze mit einem anderen Wert, wird der Tooltip wieder angezeigt, aber beim verlassen wird er nicht versteckt sondern bleibt immer da.

Habe keine erklärung dafür. Event. eine Bug von IE?

Gruss
Werner

[LX]

Hallo Werner,

es könnte daran liegen, dass der IE die Events teilweise nicht in der vorgesehenen Reihenfolge ausführt. Lass Dir mal alerts ausgeben, wann welches Event vorkommt. Ansonsten poste auch noch mal die andere Funktion.

Gruß, LX

[WernerK]

Hallo,
danke dir für deine Hilfe.
Mit den Alerts als Hilfsmittel habe ich auch schon versucht.
Es ist in der Tat etwas seltsam.

Also beim laden der Seite und beim ERSTEN Mal ins <select> klicken sind die Alerts so:

Zeige Tooltip
Tooltip wird angezeigt
jetzt hide  (wenn mit Maus ausserhalb von select)

Beim ZWEITEN mal ins select mit anderem Value

Jetzt hide
zeige tooltip
jetzt hide (wenn mit Maus ausserhalb von select)

Wobei hier nun die Alerts "jetzt hide" und "zeige tooltip" fast gleichzeitig erscheinen. der Altert "zeige tooltip" liegt unter dem Alert "jetzt hide"

Irgendwas kommt da durcheinander.
Das erste "jetzt hide" dürfte doch garnicht erscheinen, denn man ist doch noch innerhalb des <select>?
Ich hoffe ich habe eine genaue Beschreibung gegeben.

  
function showDefTooltip(obj,selobj){  
alert('zeige tooltip');  
document.forms[0].lis_Body_hidden.selectedIndex=obj;  
wert = document.forms[0].lis_Body_hidden.value;  
angaben=wert.split("#@#")  
info = "<div class=\"head\">Definition</div>";  
format = "<div class=\"def\"><br /><b>Format<\/b>:  "+angaben[2];  
size =  "<br /><b>Size<\/b>:  "+angaben[3];  
text = info + format + size ;  
Xpos = getX(selobj,false);  
XposTip = Xpos + 200 + "px";  
Ypos = getY(selobj,false);  
YposTip = Ypos + 5 + "px";  
varobj = document.createElement ("div");  
varobj.id = "tooltip";  
varobj.style.left = XposTip;  
varobj.style.top = YposTip;  
document.body.appendChild (varobj);  
this.varobj.innerHTML = text;  
}//function

function hideDefTooltip(){
 if(document.getElementById('tooltip')){
  alert('jetzt hide');
  varobj = document.getElementById('tooltip');
  varobj.style.display= 'none';
 }
}

[WernerK]

Hallo nochmals,
ich habe mal weiter gesucht und bin auf den Begriff "ebent bubbling" gestossen
kann es damit zusammenhängen,?

Das event. das "onmouseout" sich nicht nur auf das <select> element insgesamt bezieht sondern auch auf die einezelnen Values?

Gruss
Werner

[WernerK]

Hallo
hat denn niemand eine Idee?
Suche und probiere schon stundenlang herum.

[WernerK]

ok, ich dachte nachdem ich so oft nachgefragt habe hier in diesem Post, schaut hier eh niemand mehr rein.
Aber ok, versuchen wir es.

Hallo Forum,
nach über einem Tag suchen und ausprobieren habe ich jetzt zwar eine Lösung aber es wäre schön, wenn trotzdem meine alte Version laufen würde.
ich muss leider ein wenig ausholen um es zu beschreiben.

Folgende Ausgangssituation:

Ein Select Auswahlmenü auf einem Form.
Beim Click auf einen Wert wird ein Tooltip angezeigt. Beim Verlassen des Select Bereichs soll der Tooltip ausgeblendet werden.
Das Div Elelemt für den Tooltip wird per JS in der Funktion "showDefTooltip" erstellt.
Soweit so gut.
Jetzt passiert folgendes.
Beim ersten mal in das Select clicken wird der Tooltip angezeigt. beim Verlassen wird er ausgeblendet.
Beim zweiten mal in das Select klicken wird er angezeigt und geht aber nicht mehr weg, obwohl die Funktion "hideDefTooltip" greift.
(getestet durch alerts) und obwohl. Also wird irgendwie der "display.style='none' nicht ausgelöst?

<select name="lis_Body" id="warn_lis_Body"  onchange="showDefTooltip(this.form.lis_Body.selectedIndex,this.form.lis_Body);" onmouseout="hideDefTooltip();">
<option id="lis_Body_PTA" value="PTA" >Auto</option>
<option id="lis_Body_Lr" value="Lr" >Lr</option>
</select>

Die JS-Funktionen:
function showDefTooltip(obj,selobj){
alert('zeige tooltip');
document.forms[0].lis_Body_hidden.selectedIndex=obj;
wert = document.forms[0].lis_Body_hidden.value;
angaben=wert.split("#@#")
info = "<div class="head">Definition</div>";
format = "<div class="def"><br /><b>Format</b>:  "+angaben[2];
size =  "<br /><b>Size</b>:  "+angaben[3];
text = info + format + size ;
Xpos = getX(selobj,false);
XposTip = Xpos + 200 + "px";
Ypos = getY(selobj,false);
YposTip = Ypos + 5 + "px";
varobj = document.createElement ("div");
varobj.id = "tooltip";
varobj.style.left = XposTip;
varobj.style.top = YposTip;
document.body.appendChild (varobj);
this.varobj.innerHTML = text;
}//function

function hideDefTooltip(){
 if(document.getElementById('tooltip')){
  alert('jetzt hide');
  varobj = document.getElementById('tooltip');
  varobj.style.display= 'none';
 }
}

Nach über einem Tag forschen und versuchen habe ich jetzt folgendes hinbekommen.
Wenn ich ein Div fest auf dem Formular ablege, also:

<div id="tooltip" style="display:none"></div>

Und die Funktionen so ändere:
(bei "showDefTooltip" wird die Erstellung des Div rausgenommen)
function showDefTooltip(obj,selobj){
document.forms[0].lis_Body_hidden.selectedIndex=obj;
wert = document.forms[0].lis_Body_hidden.value;
angaben=wert.split("#@#")
info = "<div class="head">PaperDefinition</div>";
format = "<div class="def"><br /><b>Format</b>:  "+angaben[2];
size =  "<br /><b>Size</b>:  "+angaben[3];
text = info + format + size ;
document.getElementById("tooltip").style.display = 'block';
document.getElementById("tooltip").innerHTML = text;
}//function

function hideDefTooltip(){
 if(document.getElementById('tooltip')){
 varobj = document.getElementById('tooltip');
 varobj.style.display= 'none';
 }
}

dann funktioniert es wunderbar mit dem ausblenden und einblenden.

Ich hatte das aber extra so gemacht, weil ich diese Tooltips auf mehreren Seiten machen möchte und so müsste ich auf jeder Seite
dieses "div id=tooltip" einbinden. Wenn es direkt mit JS gemacht wird, wäre es einfacher.

Hat jemand eine Erklärung für das Problem

vielen Dank
Werner

[Thorsten Schleppi]

Hallo!

ok, ich dachte nachdem ich so oft nachgefragt habe hier in diesem Post, schaut hier eh niemand mehr rein.

Wenn man sich im Forum registriert und in die benutzerspezifische Sicht wechselt, kann man sich die Threads in Reihenfolge der letzten Beiträge anzeigen lassen. Dann ist dein Thread wieder oben.
(War also nicht böse gemeint.)

Aber ok, versuchen wir es.

Viel Erfolg!
(Sorry, ich kann dir leider nicht sagen, woran's liegt...)

Viele Grüße
Thorsten

[WernerK]

na ja
wie du siehst ist es doch so wie ich vermutet habe.
Das nämlich hier so weit unten niemand mehr reinschaut.

viele grüße
Werner

[Struppi]

wie du siehst ist es doch so wie ich vermutet habe.
Das nämlich hier so weit unten niemand mehr reinschaut.

Daran liegt es sicher nicht, da für registrierte Benutzer nämlich dieser thread nicht unten ist, sondern relativ weit oben (wenn die Ansicht so aktiviert ist, dass die Threads mit neuen Beiträgen so angezeigt werden).

Aber dein Code ist unübersichtlich und schwer zu lesen, du könntest das schon mal verbessern, wenn du den Code markieren und vernüftig formatieren würdest. eine weitere Schwierigkeit ist, dass man deinen Code nicht ausprobieren kann ohne Änderungen vornehmen zu müssen, das macht nicht jeder gerne.
Dann hast du hier die gleiche Fragestellung, wo sogar schon die Lösung vorhanden ist, nur die Logik deines Skriptes ist falsch, da du den Inhalt des tooltips nur änderst, wenn es erzeugt wurde.

Struppi.