jQuery: Event Bubbling und wie "click", "live.click", "stopPropagation" und "return false" zusammenarbeiten

8

Ich werde ein Paar Szenario hier haben. Bitte hilf mir

Hier ist der Basisfall: Ссылка

Wenn ich auf " Click Me " klicke, erscheinen sowohl die Benachrichtigungsbox als auch Another Paragraph . Dies wird erwartet, da das Klickereignis bis zum übergeordneten Container aufsteigt. Dies ist body . Starten Sie nun meine Fragen

1) Ссылка

Wie kommt es, dass das Hinzufügen von return false zu meinem live.click das Click-Ereignis nicht aufhebt? Aus dem Beispiel blubbert der live.click und löst die Alarmbox aus. Ich dachte, die Dokumentation sagte, dass Return false das Live-Event von der Blase stoppen wird.

2) Ссылка

Jetzt ändere ich das Klickereignis in body in live.click und behebt das Problem - & gt; Das Klickereignis blubbert nicht (daher wird keine Warnmeldung angezeigt). Warum funktioniert live.click und click nicht.

3) Ссылка

Ich denke, die Dokumentation hat klar gesagt, dass das Aufrufen von event.stopPropagation() das Aufblubbern nicht aufhalten wird, nun ja. Ich verwende event.stopPropagation() erwartet, dass es immer noch meine Alarmbox auslöst, aber das tut es nicht. Warum?

HINWEIS : Für die Antwort der ersten beiden Fragen, siehe justkt Antworten. Für die Antwort auf die letzte Frage, siehe Squeegy antwort und seine Antwort .

    
Thang Pham 03.05.2011, 17:20
quelle

2 Antworten

11

Antworten auf Ihre Fragen finden Sie in der Dokumentation event.stopPropagation () .

In Bezug auf Live ("Klick") versus "Klick" und Blasen:

  

Da die .live () -Methode Ereignisse verarbeitet, sobald sie an den Anfang des Dokuments übertragen wurden, ist es nicht möglich, die Übertragung von Live-Ereignissen zu stoppen. Ähnlich werden Ereignisse, die von .delegate () behandelt werden, immer an das Element weitergegeben, an das sie delegiert wurden. Event-Handler für alle darunter liegenden Elemente wurden bereits zu dem Zeitpunkt ausgeführt, zu dem der delegierte Event-Handler aufgerufen wird.

Was Sie also sehen, ist das erwartete Verhalten. live ('click') hört nicht auf zu blubbern. Das gleiche gilt für die nun bevorzugte .delegate () .

Diese Antwort beschreibt ausführlich die Probleme beim Beenden der Anwendung bei Verwendung von .live. Siehe auch die .live () Dokumentation:

  

Das Ereignis blubbert, bis es die Wurzel des Baumes erreicht, wo .live () seine speziellen Handler standardmäßig bindet.

     
  • Ab jQuery 1.4 kann Event-Bubbling optional bei einem DOM-Element "context" anhalten.
  •   

In Bezug auf stopPropagation selbst:

  

Töte die Blasenbildung beim Klickereignis.

Also stopPropagation () sollte Blasenbildung verhindern , wo auch immer false zurückgegeben wird; wird , obwohl nicht wo es nicht geht. Es ist preventDefault () , das das Blubbern nicht verhindert. return false; ist effektiv stopPropagation () und preventDefault ().

Als Antwort auf jedes Beispiel-Beispiel.

  

1) Ссылка

return false; verhindert nicht, dass Ereignisse, die mit live oder delegate verbunden sind, in die Blase gelangen. Die Dokumentation sagt dies explizit über alle Sprudeln, egal ob mit return false; oder mit stopPropagation() . Also was passiert ist

  1. Klicken Sie auf <p>
  2. Klicken Sie auf bubbles to <body> , wobei body.click() ausgelöst wird
  3. Klicken Sie auf Blasen, um den Stamm zu dokumentieren, wo er mit $(event.target).closest('p'); übereinstimmt und so live('click') aufgerufen wird
  4. Die Rückgabe false geschieht, aber body handler wurde in Schritt 2
  5. aufgerufen
  

2) Ссылка

In diesem Fall gelangt das Ereignis an die gleiche Stelle (Dokumentstamm) und die Rückkehr false stoppt die Weiterleitung an das weitere Ereignis, das über live , das sich auf dem Körper befindet, gebunden ist.

  1. Klicken Sie auf <p>
  2. Klicken Sie auf bubbles to <body> , aber da der body's-Handler über live angehängt ist, wird er noch nicht aufgerufen
  3. Klicken Sie auf Blasen, um den Stamm zu dokumentieren, wo er mit $(event.target).closest('p'); übereinstimmt und so live('click') aufgerufen wird
  4. Rückgabe false passiert
  5. live('click') wird nicht im Hauptteil aufgerufen, da die Rückgabe falsch ist.
  

3) Ссылка

stopPropagation() wird explizit verwendet, um Blasenbildung zu verhindern, obwohl es die gleichen Einschränkungen hat wie return false; - also verhindert es nicht im Falle eines live('click') -Ereignisses, wenn Click-Handler über bind gebunden sind. .

    
justkt 03.05.2011, 17:46
quelle
2
  1. Live-Ereignisse treten IMMER nach Bindungsereignissen auf (wie das Aufrufen von click(fn) ). Daher gibt false rue nichts, weil $("body").click() bereits passiert ist. Dies ist auf Blasenbildung zurückzuführen. Der Klick erfolgt auf jedem Elternelement des Elements, auf das Sie geklickt haben, und löst jedes Klickereignis aus. Nur wenn es zum Root-Dokument aufsteigt, löst es Live-Events aus.

  2. In diesem Beispiel haben Sie 2 Live-Events. Das Ereignis blubbert also zum Dokument und jQuery startet alle Live-Ereignisse, die Ihrem Klick entsprechen. Wenn es return false erreicht, werden keine anderen Live-Events mehr ausgeführt. Und Live-Events, die zuerst erklärt werden, laufen zuerst. Sie erhalten also den neuen Absatz, aber nichts anderes, seit die Warnung nach dem p live click zum Live-Event-Stack hinzugefügt wurde.

  3. Es wird nicht die Propagierung für Bindungsereignisse anhalten, aber das event -Argument ist eigentlich ein jQuery-Ereignis-Wrapper-Objekt, und ich glaube, es kennt live . Es hat also einen ähnlichen Effekt wie die Rückgabe von false und verhindert, dass der Click-Handler weitere Live-Events ausführt.

Alex Wayne 03.05.2011 17:54
quelle

Tags und Links