Ergebnis 1 bis 7 von 7
  1. #1
    Sumit ist offline Grünschnabel
    registriert
    20-06-2011
    Beiträge
    4

    onclick bei verschachtelter Liste

    Hallo allerseits,

    Ich machs kurz:
    Verschachtelte Liste á la:
    HTML-Code:
    <ul>
    	<li>Ebene 3a</li>
    	<li>Ebene 3b</li>
    	<li>Ebene 3c</li>
    	<li>Mit Untermenü
    		<ul>
    			<li>Ebene 4a</li>
    			<li>Ebene 4b</li>
    			<li>Ebene 4c</li>
    			<li>Ebene 4d</li>
    		</ul>
    	</li>
    	<li>Ebene 3d</li>
    </ul>
    Ich vergebe jetzt dynamisch auf das LI dass das Untermenü erhält ein onclick Event. Das Problem ist, dass der onclick auch ausgelöst wird wenn ich in den Bereich des Kindes (UL mit LIs (Ebene4a usw...)) klicke. Wie kann ich das verhindern? Das Kind (UL) soll quasi im Vordergrund stehen und nicht vom Elternelement (LI) überdeckt werden o.ä. . Zumindest das onClick Event scheint im Vordergrund zu stehen.

    Code:
    // thisElements ist ein Array mit allen LI's in der Baumstruktur/verschachtelten Liste.
    
    for (i=0; i < this.listElements.length; i++) {				
    	for(z=0; z < this.listElements[i].childNodes.length; z++) {
    		if (this.listElements[i].childNodes[z].tagName =="UL") {
    			this.listElements[i].onclick = this.toggleSub;
    		}
    	}
    }
    
    this.toggleSub = function() { alert("test");};
    Der Alert wird auch ausgelöst wenn ich z.B. auf "Ebene 4b" klicke. Das möchte ich verhindern. BTW: Verhält sich auch so wenn ich direkt in das entsprechende LI
    Code:
    onclick="obj.toggleSub();"
    schreibe.

    Danke im Voraus & Lieben Gruß,
    Sumit
    Geändert von Sumit (20-06-2011 um 14:34 Uhr)

  2. #2
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: onclick bei verschachtelter Liste

    Warum gehst du nicht den umgekehrten Weg?
    Der kompletten Liste einen klick Handler verpassen und dann über das Eventobjekt das Objekt rausfinden, das angeklickt wurde um dann entsprechend zu reagieren.

  3. #3
    Sumit ist offline Grünschnabel
    registriert
    20-06-2011
    Beiträge
    4

    AW: onclick bei verschachtelter Liste

    Naja davon behebt sich das Problem ja nicht oder?

    Sagen wir JEDES LI in der Liste hat ein onclick. Wenn ich dann auf "Ebene 4a" klicke, gibt es zwei targets. Das LI mit "Ebene 4a" und das LI "mit Untermenü". egal was ich dann tue, wird doppelt ausgefürt...

  4. #4
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: onclick bei verschachtelter Liste

    Zitat Zitat von Sumit Beitrag anzeigen
    Naja davon behebt sich das Problem ja nicht oder?
    Wieso nicht?

    HTML-Code:
    <!DOCTYPE html>
    <html>
    <Head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    </style>
    </head>
    <body>
    
    <ul id="liste">
    	<li>Ebene 3a</li>
    	<li>Ebene 3b</li>
    	<li>Ebene 3c</li>
    	<li>Mit Untermenü
    		<ul>
    			<li>Ebene 4a</li>
    			<li>Ebene 4b</li>
    			<li>Ebene 4c</li>
    			<li>Ebene 4d</li>
    		</ul>
    	</li>
    	<li>Ebene 3d</li>
    </ul>
    
    <script type="text/javascript">
    var list = document.getElementById('liste');
    
    list.onclick = function(e) {
        if(!e) e = window.event;
        var obj = e.target || e.srcElement;
        if(hasSubList(obj)) {
            alert(obj);
        }
    };
    
    function hasSubList(el) {
        return el.getElementsByTagName('ul').length > 0;
    }
    </script>
    </body>
    </html>

  5. #5
    Sumit ist offline Grünschnabel
    registriert
    20-06-2011
    Beiträge
    4

    AW: onclick bei verschachtelter Liste

    Servus,

    Wow das klappt. Herzlichen Dank! Ist das der generelle Weg wie man so ne Baumstruktur / Klappmenü Navi umsetzt?
    Ich bin mir nicht ganz sicher ob ichs raffe.

    Es wird auf die komplette LIste ein onclick gelegt,
    wenn man Klickt, wird das target an hasSubList übergeben - dort wird - insofern ein KindElement UL existiert - irgendwas(?) zurückgegeben - deshalb wird der alert ausgelöst.

    Stimmt das so?

    Diesen Ausdruck verstehe ich glaub ich noch nicht vollständig. Ist das ne Kurzschreibweise?
    Code:
    return el.getElementsByTagName('ul').length > 0;

  6. #6
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: onclick bei verschachtelter Liste

    getElementsByTagName() gibt ein Array (bzw. eine Nodelist) zurück, wenn die Anzahl (length) größer Null ist, dann ist der Ausdruck wahr und es wird true von der Funktion zurückgegeben.

  7. #7
    Sumit ist offline Grünschnabel
    registriert
    20-06-2011
    Beiträge
    4

    AW: onclick bei verschachtelter Liste

    Herzlichen Dank!

Ähnliche Themen

  1. Verschachtelter Delete in mySQL
    Von petz_e im Forum Serverseitige Programmierung
    Antworten: 5
    Letzter Beitrag: 02-05-2008, 10:27
  2. Verschachtelter string
    Von L3viathan im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 04-02-2008, 07:51
  3. Antworten: 6
    Letzter Beitrag: 08-06-2006, 18:57

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •