JQuery Klick auf li mit verschachteltem ul

Question

Ich habe eine Liste mit verschachtelten Listen. Wenn ein Benutzer auf ein Listenelement (

• ) klickt, möchte ich, dass die verschachtelte angezeigt wird. Bevor ich die verschachtelten Listen hinzugefügt habe, habe ich einfach eingestellt, dass durch Klicken auf ein Listenelement eine Funktion ausgeführt wird. Jetzt führt das Klicken auf eine der verschachtelten Listen auch diese Funktion aus. Das ergibt Sinn, da sie Teil des Listenelements sind.

  Abgesehen davon, dass ich einen um den ersten Teil des Listenelements wickele und die Funktion darauf ausführe, gibt es einen Selektor, der es mir ermöglicht, etwas auf das Elternelement

  • auszuführen, aber nicht auf seine Kinder, speziell nicht auf die Kind-Listen und Listenelemente?

    HTML:

            Alle anzeigen
    
            Gruppen
    
                    Gruppe 1
    
                    Gruppe 2

    Javascript (nicht viel davon, ich kann mehr zeigen, wenn nötig):

    $( 'li.bucket' ).live( 'click',
        function()
        {
            // mache etwas
        })

    Ich möchte, dass ein Klick auf "Gruppen" oder "Alle anzeigen" die Klickfunktion ausführt, aber ein Klick auf "Gruppe 1" oder "Gruppe 2" sollte es nicht.

Answer 1

Es gibt einen offiziellen Weg, aber in Ihrem Fall könnte es ziemlich teuer sein:

$('li.bucket *').live('click', function(event) { event.stopPropagation() });

Die Kinder des li haben jetzt einen Handler, der verhindert, dass das Ereignis nach oben weitergeleitet wird und den Handler des li auslöst. Bitte probieren Sie es aus und sehen Sie, ob die Anwendung nicht zu stark verlangsamt wird.

Answer 2

Sie können die obige Funktion onmouseover des Listenelements steuern und sie onmouseout Ereignis des Elements entfernen. Aber ich weiß nicht, wie effizient es im Vergleich zu anderen Methoden wäre.

Answer 3

Ich mag @MvanGeests Lösung, aber es gibt einen besseren Weg, indem man die Ereignispropagation versteht. Wenn ein Element angeklickt wird, erhalten die enthaltenen Elemente das Ereignis zuerst und tröpfeln durch den Baum nach oben. Wenn ich Ihre Anfrage richtig verstehe, möchten Sie verhindern, dass das enthaltene ul Ereignisse nach oben im Baum sendet. Ich denke, hier ist eine Visualisierung am besten.

In diesem Fall sehen Sie, dass das onclick auf dem ul in der Mitte die Propagation zum li stoppt. Außerdem ist event.stopPropagation() nicht browserübergreifend. Ich empfehle diese Methode als Ihre onclick-Funktion.

function StopPropagation(e) {
  var event = e || window.event;

  [body of event handler function goes here]

  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  } 
}