Tut stopPropgation beenden die Veranstaltung von der Propagierung in der capture-phase?

War ich bei der Suche http://www.quirksmode.org/js/events_order.html und es ist nicht eindeutig in diesem Artikel:

In der Microsoft-Modell müssen Sie die Veranstaltung cancelBubble Eigenschaft true.
window.event.cancelBubble = true
In der W3C-Modell müssen Sie rufen Sie die Veranstaltung stopPropagation() Methode.
e.stopPropagation()
Dies Stoppt die Vermehrung der Veranstaltung in der bubbling-phase.

Also meine Frage ist:

Wenn ein Ereignis-listener festgelegt ist, zu hören in der capture-phase, funktioniert es automatisch nicht weiter propagieren, um die inneren Elemente?
Oder, wenn es nicht weiter propagieren, hat Berufung e.stopPropagation() stoppen, oder bedeutet das nur Arbeit für die bubble phase?

^ genau. lol
guter Punkt, Jungs. :S Scannen meiner letzten Beiträge jetzt und prüfen akzeptieren, wenn ich müßte. must_be_better_citizen

InformationsquelleAutor yic | 2012-09-17

5

Nein, einen Ereignis-listener hört nicht alle Ereignisse, die sich aus der Propagierung, es sei denn, Sie ausdrücklich auffordern. Der Teil auf den Sie sich beziehen, befasst sich mit der bubble-phase spezifisch. IE-Modell nicht unterstützt, event capturing - full stop. die capture-phase ist, was vorangeht, die bubbling-phase:
```
Top of the DOM --->event--->traverses--->to--->[target]+[event]-| (capture phase)
      /\                                                       \/
      |------------------------to--------back up-----------------  (bubble up)
```
- Danke. Es sieht aus wie der IE8 nicht unterstützt, event capturing, aber mit dem IE9 funktioniert: msdn.microsoft.com/en-us/library/windows/apps/hh453039.aspx
- Meine Frage ist, hat e.stopPropagation() stoppen die Ausbreitung von sprudelnden nur, oder aber auch die Ausbreitung von capturing und-bubbling? Möglich die Antwort ist browser-abhängig.
- Kurze Antwort: stopPropagation Stoppt den Fall in beiden Fällen. Wie die (schrecklichen) ASCII-Diagramm zeigt die event-sets aus der document, und senkt sich nach unten in den DOM, gegenüber dem element, an dem das Ereignis ausgelöst wurde. Danach sprudelt es zurück bis zu dem Dokument. Bei jedem Schritt zwischen diesem Prozess kann beendet werden, unabhängig davon, dass es während der Aufnahme oder der bubble phase.
- Ich glaube, ich verstehe Sie. Danke für die Erklärung so schön. Also durch das W3C, wenn ich sowohl eine capture-Ereignis-listener und eine Blase Ereignis-listener: - Wenn nur die capture-Ereignis-listener haben e.stopPropagation(), die bubble-Ereignis-listener würde nicht das Ereignis sehen. - Wenn sich die Blase Ereignis-listener haben e.stopPropagation () in der capture-Ereignis-listener würde noch das Ereignis sehen, da die Veranstaltung ging durch die Erfassung einer der ersten. Ist das richtig?
- Nicht ganz. Der erste Teil, du hast Recht: das beenden der Veranstaltung von der Propagierung bedeutet, dass das Ereignis würde Sie nicht erreichen die bubble-phase, wenn Sie aufhören, die Veranstaltung, während Sie brodelt, jede Aufnahme Zuhörer würde entlassen wurden, vor, dass: erste ein event wird durch die capturing-phase, dann ist es Blasen. Wenn Sie stop während der bubbling -, die Aufnahme-phase abgeschlossen ist...
- Ok, danke 🙂 ich denke, dass wir eigentlich das gleiche sagen... wenn Sie stoppen, während das sprudeln, die capturing-phase abgeschlossen ist, ... also, anhalten, während Sie sprudelt nicht verhindern, dass die Zuhörer, die hören in der capture-phase von der Verarbeitung des Ereignisses.
- Nein, es gibt eine wichtige Unterscheidung gemacht werden: wenn Sie aufhören, ein Ereignis in der bubble-phase, hat das den Zuhörer sowohl die capture-und bubble-Phasen, die Zuhörer in der capture-phase haben Sie das Ereignis behandelt. Sie hatten einfach nicht mehr aufhören. So konnten Sie eine capture handler warnen, die etwas, und eine Blase-listener tun alert-etwas anderes, und rufen Sie die stopPropagation Methode. Dies werde dazu führen, dass zwei Alarme zeigen
- Kann ich nur Zustimmen, das ist genau das, was ich versucht habe, auszudrücken! Ich glaube, dass wir wirklich sagen, die gleiche Sache! Das ist lustig 🙂
- Unglaublich, wie diese Antwort noch eigentlich nicht die Frage beantworten (nicht aufrufen.e.stopPropagation() ihn stoppen?) und wir müssen die Kommentare Lesen. Antwort von Leon li ist viel besser.
InformationsquelleAutor Elias Van Ootegem
25

Kurze Antwort: Die Reihenfolge ist:
1. Erfassen (unten)
2. Ziel
3. Blase (bis).
Wenn Sie anrufen e.stopPropagation() in der capture-phase (Einstellung der addEventListener()'s 3. argument zu true), hält es bei 1, so 2 & 3 kann es nicht empfangen.

Wenn Sie anrufen e.stopPropagation() in der bubble-phase (Einstellung der addEventListener()'s 3. argument zu false oder einfach nur nicht zuordnen), die 1 & 2 sind bereits abgeschlossen, so dass es nur verhindert, dass die Veranstaltung von brodelt das Niveau, wo Sie anrufen stopPropagation().
- Ich denke, die Frage ist spezifischer. Tut event.stopPropagation() hält einen Fall aus der absteigenden obwohl die restlichen event.target's Vorfahren? Oder ist es verhindert nur, dass die Phasen 2 und 3, in der Erwägung, dass phase 1 abgeschlossen wird, egal was?
InformationsquelleAutor LeOn - Han Li

stopPropagation() wird nicht aufhören, die erfassten Ereignis-handler immer genannt. stopPropagation() Stoppt das sprudelte event-handler immer genannt.

Jsfiddle

JS:

var outputDiv = document.getElementById('output');

function log(msg) {
  outputDiv.insertAdjacentHTML('afterend', msg + '<br>');
}

/////////////////////
//Bubbling listeners
/////////////////////
document.getElementById('row1').addEventListener('click', function(e) {
  log('Bubbling row1 listener called');
  e.stopPropagation();
}, false);

document.getElementById('row2').addEventListener('click', function(e) {
  log('Bubbling row2 listener called');
  //NO stopPropagation on this one.
}, false);

document.getElementById('table').addEventListener('click', function() {
  log('Bubbling table listener called');
}, false);


document.addEventListener('click', function() {
  log('Bubbling document listener called');
}, false);

/////////////////////
//Capturing listeners
/////////////////////
document.addEventListener('click', function() {
  log('Capturing document listener called');
}, true);

document.getElementById('table').addEventListener('click', function() {
  log('Capturing table listener called');
}, true);

CSS:

#outputwrapper {
  border: 1px solid black;
  height: 300px;
  overflow: scroll;
}

HTML:

<table id="table" border="1">
  <tbody>
    <tr>
      <td id="row1">
        This row has stopPropagation
      </td>
    </tr>
    <tr>
      <td id="row2">
        This row does not have stopPropagation
      </td>
    </tr>
  </tbody>
</table>
<br>Output
<br>
<div id="outputwrapper">
  <div id="output"></div>
</div>

Sie haben zwei Probleme. Erste, Sie werden Zeile 1 und Zeile 2, nicht Spalten. Zweite, Zeile 2 event-handler ist eigentlich nicht in der capturing-phase, da die Dritte argument für seine addEventListener fehlt. Die akzeptierte Antwort ist richtig.
first off, ich Stimme mit der Spalte irreführend. Ich hatte eigentlich verkürzt den code, indem einige Spalten und hatte diese Links über code.
Ich veränderte den code, um zu reflektieren, was ich versucht habe zu erklären.

InformationsquelleAutor Ravi Gidwani

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.