onblur

[luckger]

Hallo,

ist es möglich bei der Anweisung 'onblur' mehrere Elemente auszunehmen?

Hintergrund:
ich habe ein Menü dass sich bei click auf einen Button öffnet. Wenn der User nun nicht in das Menü klickt soll sich das Menü wieder schließen. Das Ganze ist mit einer Liste (<ul><li> usw..) realisiert.

Vielen Dank schon im voraus,

luckger

[Steel]

Hi!

Dann frag beim blur doch ab, ob in das Menue geklickt wurde.

[molily]

Hallo,

ist es möglich bei der Anweisung 'onblur' mehrere Elemente auszunehmen?

Hintergrund:
ich habe ein Menü dass sich bei click auf einen Button öffnet. Wenn der User nun nicht in das Menü klickt soll sich das Menü wieder schließen. Das Ganze ist mit einer Liste (<ul><li> usw..) realisiert.

Den Event blur gibt es nur bei Elementen, die fokussiert werden können, das sind v.a. Formular-Eingabefelder und Links. Dein Menü ist beim Aufklappen nicht fokussiert (höchstens Links darin, wenn sie mit der Tastatur angesprungen wurden), also passiert dort auch kein blur-Event, wenn der Anwender irgendwo ins Dokument klickt.

Du willst wahrscheinlich eher diesen Klick, der nicht das Menü trifft, behandeln. Also setzt du einen dokumentweiten click-Handler: document.onclick = handler;. Der verarbeitet dann alle click-Events im Dokument, denn click-Events steigen auf (»Bubbling«). Konkret schließt dieser Handler das Menü, falls es aufgeklappt ist.

In der Handler-Funktion müsstest du dann eben abfragen, ob der Klick nicht das Menü getroffen hat. Da könnte man über das Ziel-Element (target bzw. srcElement) gehen, also das Element, welches tatsächlich geklickt wurde und von dem der Event dann aufgestiegen ist.

Einfacher geht es, wenn du dem Menü einen click-Handler verpasst, der das Aufsteigen von click-Ereignissen verhindert. Dadurch kommen beim click-Handler beim darüberliegenden document-Objekt nur diejenigen click-Events an, die nicht von Elementen im Menü ausgingen.

Das ginge etwa so (angenommen, das Menü-Container-Element hat id="menu"):

document.getElementById("menu").onclick = menuclick;  
function menuclick (e) {  
   e = e || window.event;  
   if (e.stopPropagation) {  
      e.stopPropagation();  
   } else {  
      e.cancelBubble = false;  
   }  
}

Mathias

[luckger]

Hallo,

vielen Dank für den Tip mit dem Event Handler. Ich habe mir überlegt, dass ich damit eine Funktion aufrufen lassen, die dann abprüft ob ein entsprechendes Menüelement geöffnet ist. Wenn ja wird es wieder geschlossen. Performanceprobleme sollten keine entstehen, da es sich nur um ein paar Menüelemente handelt.

Nun habe ich nur das Problem, dass ich nicht auf die Eigenschaften des entsprechenden Elements zugreifen kann. Ich bekomme immer einen Fehler
"document.getElementById("task_menu_switch").getElementsByTagName("li")[i].getElementsByTagName("ul")[0] has no properties"

Hat jemand eine Ahnung an was das liegen kann?
Die html Struktur schaut so aus:

html:

  
<ul id='task_menu_switch>  
    <li><a href='#'>jwsi</a></li>  
    <li><a href='#'>jwsi</a></li>  
    <li><a href='#'>jwsi</a>  
        <ul>  
           <li><a href='#'>dwwd</a></li>  
           <li><a href='#'>dwwd</a></li>  
        </ul>  
    </li>  
</ul>  

javascript:

  
 var li = document.getElementById("task_menu_switch").getElementsByTagName("li");  
 for (var i=0; i < li.length; i++) {  
         alert(document.getElementById("task_menu_switch").getElementsByTagName("li")[i].getElementsByTagName("ul")[0].style.visibility);  
 }  

[Struppi]

Nun habe ich nur das Problem, dass ich nicht auf die Eigenschaften des entsprechenden Elements zugreifen kann. Ich bekomme immer einen Fehler
"document.getElementById("task_menu_switch").getElementsByTagName("li")[i].getElementsByTagName("ul")[0] has no properties"

Nicht jedes deine li Elemente hat ein ul element.

Hat jemand eine Ahnung an was das liegen kann?

Du prüfst nicht, was du verwendest.

Struppi.

[luckger]

Hi,

super danke für die Anregung. Ich habe noch eine Überprüfung eingefügt und jetzt funktioniert alles.

Danke an alle!!

luckger