Archivlink: javarea.de Forum > JavaScript > onmouseout schließt beim Berühren
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > onmouseout schließt beim Berühren

Pages: [1]

geschrieben von Herbert1204 am 04.10.2010 - 18:54
Hallo Allerseits

Ich habe unten ein Script eingefügt.
In diesem Script wird durch Anklicken eines Buttons eine Tabelle angezeigt.
Mit dem Ereignis onmouseout soll die Tabelle unsichtbar werden. Aber leider wird die Tabelle bereits beim Berühren unsichtbar (wie bei onmouseover).
Wo dran liegt das?

Des weiteren befindet sich in der Tabelle ein Submit.
Mit Klick auf den Submit überprüft das System, ob in der Tabelle Eintragungen vorgenommen wurden. Wenn nicht, erscheint eine Fehlermeldung. Ansonsten werden die Daten per E-Mail versannt.

Jetzt meine Bitte:
Kann mir jemand das Script folgendermaßen umschreiben:
Wenn der Submit angeklickt wird und keine Fehlermeldung erscheint, soll die Tabelle unsichtbar werden.

Im Voraus schon einmal Vielen Dank









<SCRIPT LANGUAGE="JavaScript">

function validate_form() {

validity = true;

if ((check_checkbox(document.form.Rubrik[00]) == false) && (check_checkbox(document.form.Rubrik[01]) == false) && (check_checkbox(document.form.Rubrik[02]) == false) && (check_checkbox(document.form.Rubrik[03]) == false) && (check_checkbox(document.form.Rubrik[04]) == false) && (check_checkbox(document.form.Rubrik[05]) == false) && (check_checkbox(document.form.Rubrik[06]) == false) && (check_checkbox(document.form.Rubrik[07]) == false) && (check_checkbox(document.form.Rubrik[08]) == false) && (check_checkbox(document.form.Rubrik[09]) == false)

){ /* Funktion Namen (Abfrage) */
validity = false;
show('Layer'); /* zeige Fehler */
}
if (validity);
return validity; /* alle Angaben waren korrekt */
}
function check_checkbox(r, v) {
return (r.checked); /* gibt false zurück wenn nicht übergebener Wert */
}
if (((navigator.appName == "Netscape") && (parseInt(navigator.appVersion.substring(0,1)) >=3))
|| ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion.substring(0,1)) >=4)))

{var version=true}

if (document.layers){ /* Browserabfrage: Layer-Object bekannt? */
ns = 1; ie = 0;
}else{
ns = 0; ie = 1;
}
function show(name) {if (ns){ /* Funktion Schicht anzeigen */
document.layers['' + name].visibility = "show";
}else{
document.all['' + name].style.visibility = "visible";
}
}
function hide(name) { /* Funktion Schicht verstecken */
if (ns){
document.layers['' + name].visibility = "hide";
}else{
document.all['' + name].style.visibility = "hidden";
}
}
</SCRIPT>




<script>
function showIt(t) {
v = t.id;
if(v == 'start') {
document.getElementById('opt_start').style.display = 'block';
} else {
document.getElementById('opt_start').style.display = 'none';
}
}
</script>



<form name="form" method="post" action="mailto:henze-herbert@t-online.de?SUBJECT=Betreff für die Mail" enctype="text/plain" onSubmit="return validate_form(this.form)">


<input type="button" name="tage" id="start" onClick="showIt(this)" value="ansehen">


<table width="350" onmouseout="showIt(this)" class="unteroption" id="opt_start" style="display:none" bgcolor="#FFFFCC">
<tr>
<td align="left" valign="top">

<input type="checkbox" name="Rubrik" value="Rubrikbestimmung/Freizeit"> <font face="Arial"><span style="font-size:10pt;"><b><u>Freizeit &amp; Ausfl&uuml;ge</u></b></span></font><br>
<input type="checkbox" name="Rubrik" value="Rubrikbestimmung/Freizeit/Ausflug"> <font face="Arial"><span style="font-size:10pt;">Ausflug</span></font><br>
<input type="checkbox" name="Rubrik" value="Rubrikbestimmung/Freizeit/Brauchtum"> <font face="Arial"><span style="font-size:10pt;">Brauchtum</span></font><br>
<input type="checkbox" name="Rubrik" value="Rubrikbestimmung/Freizeit/Casting"> <font face="Arial"><span style="font-size:10pt;">Casting</span></font><br>
<input type="checkbox" name="Rubrik" value="Rubrikbestimmung/Freizeit/Dating"> <font face="Arial"><span style="font-size:10pt;">Dating</span></font><br>
<input type="checkbox" name="Rubrik" value="Rubrikbestimmung/Freizeit/Misswahlen"> <font face="Arial"><span style="font-size:10pt;">Miss-Wahlen</span></font><br>
<input type="checkbox" name="Rubrik" value="Rubrikbestimmung/Freizeit/Stammtisch"> <font face="Arial"><span style="font-size:10pt;">Stammtisch</span></font><br>
<input type="checkbox" name="Rubrik" value="Rubrikbestimmung/Freizeit/Sportveranstaltungen"> <font face="Arial"><span style="font-size:10pt;">Sportveranstaltungen</span></font><br>
<input type="checkbox" name="Rubrik" value="Rubrikbestimmung/Freizeit/Wanderung"> <font face="Arial"><span style="font-size:10pt;">Wanderung</span></font><br>
<input type="checkbox" name="Rubrik" value="Rubrikbestimmung/Freizeit/Sonstige-Veranstaltungen"> <font face="Arial"><span style="font-size:10pt;">Sonstige Veranstaltungen</span></font><br>

</td>
</tr>
<tr>
<td align="left" valign="top">
<div id="Layer" style="visibility:hidden;"><font color="red" face="Arial"><span style="font-size:11pt;"><b>Du hast keine Veranstaltungsart ausgew&auml;hlt!</b></span></font></div>

</td>
</tr>
<tr>
<td align="left" valign="top">
<input type="submit" onclick="hide('Layer')" value="ausgewählte Anzeigen ansehen" style="width:280px; font-weight:bold; font-size:12pt;">

</td>
</tr>
</table>

geschrieben von zippy am 21.10.2010 - 17:05
1: ... woran liegt das?
Du bist zwar noch innerhalb der Tabellengrenzen, aber kaum berührst du ein anderes Element innerhalb dieser Grenzen, gilt die Maus als draußen und die Tabelle verschwindet. Das ist ärgerlich. Liegt daran, dass als Eventtarget bei onmouseout das Element als Target git, in das sich die Maus bewegt, und nicht das, wo sie herkommt. Du kannst diesen Effekt abfangen, indem du in die function showIt abfragst, ob das Ereignis nicht von den Kindelementen (=die hinein geschachtelten) ausgelöst wurde oder vom Element selbst, wenn du aus einem der Kindelemente wieder ins Element zurück kommst. Dann könnte die function showIt etwa so aussehen:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
function showIt(actualevent,t) {
v = t.id;
if(v == 'start') {
document.getElementById('opt_start').style.display = 'block';
} else {
var eventtarget=actualevent.relatedTarget?event.relatedTarget:actualevent.toElement;
var childs=t.getElementsByTagName('*');
for(var i=0;i<childs.length;i++)if(childs[i]==eventtarget||t==eventtarget)return;
document.getElementById('opt_start').style.display = 'none';
}
}

Du musst die Funktion dann mit zwei Übergabewerten aufrufen, und zwar so:
HTML-Quelltext
1: 
<table width="350" onmouseout="showIt(event,this)" class="unteroption" id="opt_start" style="display:none" bgcolor="#FFFFCC">

und so:
HTML-Quelltext
1: 
<input type="button" name="tage" id="start" onClick="showIt(event,this)" value="ansehen">


2.: Tabelle verschwinden lassen, wenn alles stimmt:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
function validate_form() {
validity = true;
if ((check_checkbox(document.form.Rubrik[00]) == false) && (check_checkbox(document.form.Rubrik[01]) == false) && (check_checkbox(document.form.Rubrik[02]) == false) && (check_checkbox(document.form.Rubrik[03]) == false) && (check_checkbox(document.form.Rubrik[04]) == false) && (check_checkbox(document.form.Rubrik[05]) == false) && (check_checkbox(document.form.Rubrik[06]) == false) && (check_checkbox(document.form.Rubrik[07]) == false) && (check_checkbox(document.form.Rubrik[08]) == false) && (check_checkbox(document.form.Rubrik[09]) == false)
){ /* Funktion Namen (Abfrage) */
validity = false;
show('Layer');/* zeige Fehler */
}
else{document.getElementById('opt_start').style.display = 'none'; /* alle Angaben waren korrekt */
}
return validity;
}


geschrieben von zippy am 21.10.2010 - 19:54
Korrektur:
Hab einen Tippfehler in der ersten Funktion entdeckt. Einmal steht event statt actualevent. Hier korrigiert:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
function showIt(actualevent,t) {
v = t.id;
if(v == 'start') {
document.getElementById('opt_start').style.display = 'block';
} else {
var eventtarget=actualevent.relatedTarget?actualevent.relatedTarget:actualevent.toElement;
var childs=t.getElementsByTagName('*');
for(var i=0;i<childs.length;i++)if(childs[i]==eventtarget||t==eventtarget)return;
document.getElementById('opt_start').style.display = 'none';
}
}


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.