Wie funktioniert "this" eigentlich genau?

[Frangoo]

Hi,

ich hantiere grade mit "this" - eigentlich nicht so schwer, aber jetzt möchte ich in ein Menü, in dem ich mit "this" eine JS-Funktion zum Öffnen und Schließen eingebaut habe, so ändern, dass es mit einer Verzögerung wieder zuklappt.
Das gibt aber Probleme, und ich vermute dass es daran liegt, dass "this" doch nicht so arbeitet, wie ich es mir vorstelle.

Hier eine kurze Skizze des Codes:

Menü:

  
<ul>  
  <li onmouseover="activateMenu(this)" onmouseout="deactivate(this)">  
    <a>Menü 1</a>  
    <ul>  
      <li><a>Untermenü1</a></li>  
      <li onmouseover="activateMenu(this)" onmouseout="deactivate(this)"><a>Untermenü2</a>  
        <ul>  
          <li><a>Noch ein Untermenü</a></li>  
        </ul>  
      </li>  
    </ul>  
  </li>  
</ul>  

Im JS-Code werden die ULs einfach entsprechend auf visible oder hidden gesetzt. Für die Verzögerung brauche ich ein setTimeOut() - und dort möchte ich entsprechend gerne das "aktuelle" Element per this weitergeben - aber ich glaube das funktioniert nicht. Denn nun wird das Menü komplett und immer ausgeblendet, sobald ich nur irgendein Element verlasse.

Gitb es eine Möglichkeit, "this" zu speichern und an eine Funktion zu übergeben?

Danke für jeden Kommentar,

Gruß
Frangoo

[Struppi]

Gitb es eine Möglichkeit, "this" zu speichern und an eine Funktion zu übergeben?

Ja klar.

var speicher = this;  
Fubnktion(speicher);  

Allerdings geht aus deiner Beschreibung hervor, dass dein Problem eher setTimeout ist.

Struppi.

[Frangoo]

Hi Struppi,

var speicher = this;

Fubnktion(speicher);

>   
> Allerdings geht aus deiner Beschreibung hervor, dass dein Problem eher setTimeout ist.  
>   
  
  
Ja so hatte ich es auch gemacht, aber ich war mir nicht sicher ob das richtig funktioniert (und die Texte in SELFHTML zu "this" sind ja nicht so umfangreich).  
  
Das Problem ist bei setTimeout? Wie meinst du das?

[Struppi]

Das Problem ist bei setTimeout? Wie meinst du das?

Zitat:

Für die Verzögerung brauche ich ein setTimeOut() - und dort möchte ich entsprechend gerne das "aktuelle" Element per this weitergeben - aber ich glaube das funktioniert nicht..

Wie rufst du setTimeout auf?(Es gibt verschiedene Wege) Wo oder was ist dort?
Der Aufruf der Timeout Funktion erfolgt immer im Kontext von window, deshalb ist in dieser Funktion this = window. Vielleicht meinst du das mit "funktiohiert nicht" und dort?

Struppi.

[Frangoo]

Hi Struppi,

Wie rufst du setTimeout auf?(Es gibt verschiedene Wege) Wo oder was ist dort?
Der Aufruf der Timeout Funktion erfolgt immer im Kontext von window, deshalb ist in dieser Funktion this = window. Vielleicht meinst du das mit "funktiohiert nicht" und dort?

ja ich verstehe was du meinst.

Ich habe es jetzt einmal alles in eine Function geschrieben:

  
  
function deactivate(element,element_position)  
{  
 alert("Gestartet: deactivateNavigation");  
 element_temp = element;  
 element_temp_pos = element_position;  
 window.setTimeout(function(){element.getElementsByTagName('ul')[0].style.visibility='hidden';}, 1000);  
}  

Bringt auch nichts.
Ich glaube das Problem liegt eher in meiner Struktur: Das Eltern-LI hat den gleichen Befehl zum Ausblenden bei mouseout wie ein Kind-LI, in dem eine weitere UL verschachtelt ist. Wenn ich also nun das SUPER-Eltern-LI mit der Maus verlasse, wird die Funktion zum deaktiveren aufgerufen - was ich aber nicht verstehe, denn ALLE Kinder sind doch in das Eltern-LI verschachtelt. Und warum funktioniert es wunderbar, wenn ich dieses setTimeout rausnehme?? *verwirrt bin*.

Frangoo

[molily]

Hallo,

Ich glaube das Problem liegt eher in meiner Struktur: Das Eltern-LI hat den gleichen Befehl zum Ausblenden bei mouseout wie ein Kind-LI, in dem eine weitere UL verschachtelt ist. Wenn ich also nun das SUPER-Eltern-LI mit der Maus verlasse, wird die Funktion zum deaktiveren aufgerufen - was ich aber nicht verstehe, denn ALLE Kinder sind doch in das Eltern-LI verschachtelt.

Die Beschreibung verstehe ich nicht ganz. Wenn du das oberste li mit der Maus verlässt, wird natürlich der mouseout-Handler aufgerufen. Oder meintest du das nicht?

Wie gesagt solltest du das Bubbling bedenken, was solchen Menüs einen Strich durch die Rechnung macht.
Zumindest sollte das Menü ständig »flackern« - wenn du immer neue Timeouts setzt, wird dieser Effekt nur verstärkt. Wenn du die Maus auf den Elementen des untersten ul-Elementes herumbewegst, werden ständig mouseover- und mouseout-Ereignisse erzeugt. Die steigen auf und lösen alle mouseover- und mouseout-Handler in deinem Codebeispiel aus. Da muss man die Events untersuchen und filtern und nicht sofort das Element ein-/ausblenden.

Mathias

[Frangoo]

Hi Mathias,

Da muss man die Events untersuchen und filtern und nicht sofort das Element ein-/ausblenden.

Mathias

japp - DAS ist es! Das muss ich jetzt mal alles neu durcharbeiten.

Dankesehr :)

Frangoo

[molily]

Hallo,

Das gibt aber Probleme, und ich vermute dass es daran liegt, dass "this" doch nicht so arbeitet, wie ich es mir vorstelle.

This verweist in diesem Code einfach auf das jeweilige Elementobjekt, also das li-Element.
Alles weitere hat dann mit this nichts mehr zu tun.

Im JS-Code werden die ULs einfach entsprechend auf visible oder hidden gesetzt. Für die Verzögerung brauche ich ein setTimeOut() - und dort möchte ich entsprechend gerne das "aktuelle" Element per this weitergeben

Du kannst setTimeout eine Funktion übergeben, durch die Verschachtelung hat sie Zugriff auf die Parameter der äußeren Funktion:

function activateMenu (element) {  
   window.setTimeout(function () {  
      // Mach was mit Element  
   }, 1000);  
}

Hast du im Griff, dass der Event aufsteigt (Bubbling) und somit die Funktion activateMenu zweimal ausgelöst wird, wenn man das innere li mit der Maus überfährt? Und dass mouseover- und mouseout-Events von den Elementen im Untermenü aufsteigen und ebenfalls ständig activateMenu und deactivate aufrufen?
Wenn nicht, schau dir mal diese Beispiele an:
http://molily.de/temp/menu.html
http://molily.de/temp/mouseenter-mouseleave.html
Dort wird jeweils geprüft, welches Element das Ereignis ausgelöst hat und ob es für das Ein- und Ausklappen wirklich relevant ist.

Mathias