it-swarm.com.de

jQuery-Ereignis sprudelt

Ich möchte verstehen, wie man Bubbling genau interpretiert. Bedeutet das, die HTML-Code-Hierarchie oder etwas anderes aufzurufen?

Zweitens ging ich durch ein Beispiel und konnte den letzten Teil, in dem es heißt, nicht verstehen

Der P-basierte Click-Handler wartet auf das Click-Ereignis und verhindert, dass es weitergegeben wird (Sprudeln).

Was bedeutet das?

17
testndtv
return false;

verhindert das "Sprudeln". Es wird verwendet, um Standardaktionen wie das Aktivieren eines Kontrollkästchens, das Öffnen einer Auswahl, eines Klicks usw. zu stoppen.

Um zu verhindern, dass weitere Handler mit .live () ausgeführt werden, muss der Handler false zurückgeben. Durch den Aufruf von .stopPropagation () wird Dies nicht erreicht.

Von Vorbehalte in jQuery .live ()


Begründung (Danke an @AlienWebguy):

Der Grund, dass stopPropagation() nicht mit live() zusammenarbeitet, besteht darin, dass live() das Ereignis an ein Dokument bindet. Wenn es ausgelöst wird, gibt es keine andere Stelle, an der es weitergeleitet werden kann.

8
Joe

Das Konzept des "Sprudelns" ist so, als ob Sie ein untergeordnetes Element mit einem Klickereignis haben und nicht möchten, dass das Klickereignis des übergeordneten Elements ausgelöst wird. Sie könnten event.stopPropagation() verwenden.

event.stopPropagation() sagt im Grunde, dass Sie dieses Klickereignis nur auf DIESES KIND NODE anwenden und den übergeordneten Containern nichts mitteilen, da ich nicht möchte, dass sie reagieren.

Ereigniserfassung:

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

Event Bubbling:

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

Wenn Sie live() oder delegate() verwenden, müssen Sie return false; eingeben, obwohl dies möglicherweise nicht funktioniert. Lesen Sie das Zitat unten.

Per jQuery-Dokumente :

Da die .live () -Methode Ereignisse behandelt, sobald sie sich an der Oberseite des Dokuments Ausgebreitet haben, ist es nicht möglich, die Weitergabe von Live-Ereignissen zu stoppen. Auf ähnliche Weise werden von .delegate () verarbeitete Ereignisse An die Elemente weitergegeben, an die sie delegiert werden. Event-Handler, die an gebunden sind, werden alle Elemente, die sich darunter im DOM-Baum befinden, bereits ausgeführt , wenn der delegierte Event-Handler aufgerufen wird. Diese Handler Können daher verhindern, dass der delegierte Handler durch Ausgelöst wird, indem er event.stopPropagation () aufruft oder false zurückgibt.

In der Vergangenheit war dies ein Plattformproblem, Internet Explorer hatte ein sprudelndes Modell und Netscape hatte mehr mit Capturen zu tun (unterstützte jedoch beide).

Mit dem W3C-Modell können Sie auswählen, welches Sie möchten.

Ich denke, das Sprudeln ist populärer, weil es, wie gesagt, einige Plattformen gibt, die nur das Sprudeln unterstützen ... und es macht irgendwie Sinn als "Standardmodus".

Welche Sie wählen, ist weitgehend ein Produkt dessen, was Sie tun und was für Sie sinnvoll ist.

Weitere Informationen http://www.quirksmode.org/js/events_order.html

Eine weitere großartige Ressource: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

38
AlienWebguy

Es heißt, dass die live ()-Methode einen Handler an das document-Element anfügt und die target des Ereignisses überprüft, um zu sehen, woher es kommt. Wenn das Ziel mit dem Selektor übereinstimmt, wird der eventHandler ausgelöst. All dies ruht auf dem sprudelnden Ereignissystem.

In dem Beispiel, dem Click-Handler für das Element p, der ein Vorfahr des Elements a ist, brechen Sie das Bubbling ab, indem Sie false zurückgeben. Dann empfängt das Element document das Ereignis niemals und löst daher keine Ereignisbehandlungsroutine aus.

2
Johnny5

Im folgenden Beispiel wird ein Klickereignis mit der ID "Anker" verankert. Dieser Anker befindet sich innerhalb eines Div, an das auch ein Klickereignis angehängt ist. Wenn wir auf diesen Anker klicken, ist es so gut wie das entsprechende div. Wenn wir nun einige Sachen auf diesem Anker machen wollen, aber nicht wollen, dass der Div-Klick ausgelöst wird, können wir das Blubbern des Ereignisses wie folgt stoppen.

<div id="div">

<a href="google.com" id="anchor"></a>

</div>


$("#div").click(function(e){//On anchor click this event will not be fired as we have stop the event propagation in anchor click handler.

   //Do stuff here

});

$("#anchor").click(function(e){

   //Do stuff here

   //This line stops the event bubling and 
   //jquery has abstracted it in the event object to make it cross browser compatible.
   e.stopPropagation();
});
1
ShankarSangoli

Diese beiden Links bieten eine klare und ausführliche Erklärung zum Auftreten von Ereignissen (sowie häufig verwendeten Ereigniskonzepten).

http://jqfundamentals.com/chapter/events
http://www.mattlunn.me.uk/blog/2012/05/what-does-event-bubbling-mean/

Ab dem ersten Link

das Ereignis wird für das a-Element sowie für alle Elemente , die die a enthalten, ausgelöst - bis hin zur document

Vom zweiten Link

<div>
    <h1>
        <a href="#">
            <span>Hello</span>
        </a>
    </h1>
</div>

Nehmen wir an, wir klicken auf die Spanne, wodurch ein Klickereignis in der Spanne ausgelöst wird. bisher nichts Revolutionäres. Das Ereignis wird jedoch an das übergeordnete Element (das) weitergeleitet (oder Blasen), und ein Klickereignis wird darauf ausgelöst. Dieser Prozess wird für den nächsten übergeordneten Element (oder Vorfahren) bis zum Dokumentelement wiederholt.

Lassen Sie uns nun all dies in den Kontext eines DOM stellen. Der DOM ist ein ... Baum und jedes Element ist ein Knoten im DOM Baum. Sprudeln ist dann nur die Überfahrt eines Knotens some element zum Stammknoten document (folge deinem Elternteil, bis du nicht mehr kannst)

0
Gerald

Ebenfalls:

event.stopPropagation()

http://api.jquery.com/event.stopPropagation/

0

Ja, das Ereignis geht in der Baumstruktur nach oben, und wenn für ein Element ein Handler für dieses Ereignis vorhanden ist, wird es aufgerufen. Durch Hinzufügen von return:false in einem Handler eines der Elemente wird verhindert, dass das Ereignis sprudelt.

0
Ionut Popa