javascript stopPropgation 是否会阻止事件在捕获阶段传播？

Does stopPropgation stop the event from propagating in the capture phase?

提问by yic

I was looking at http://www.quirksmode.org/js/events_order.htmland it is ambiguous in this part:

我正在查看http://www.quirksmode.org/js/events_order.html，这部分内容不明确：

In the Microsoft model you must set the event's cancelBubbleproperty to true.

window.event.cancelBubble = true

In the W3C model you must call the event's stopPropagation()method.

e.stopPropagation()

This stops all propagation of the event in the bubbling phase.

在 Microsoft 模型中，您必须将事件的cancelBubble属性设置为true。

window.event.cancelBubble = true

在 W3C 模型中，您必须调用事件的stopPropagation()方法。

e.stopPropagation()

这会阻止事件在冒泡阶段的所有传播。

So my question is:

所以我的问题是：

• When an event listener is set to listen in the capture phase, does it automatically not continue propagating to the inner elements?
• Or if it does continue propagating, does calling e.stopPropagation()stop it, or does that only work for the bubble phase?

• 当一个事件监听器被设置为在捕获阶段监听时，它是否会自动不继续传播到内部元素？
• 或者如果它确实继续传播，调用是否会e.stopPropagation()阻止它，或者这只适用于泡沫阶段？

采纳答案by Elias Van Ootegem

No, an event listener doesn't stop any events from propagating, unless you explicitly tell it to. The part you're referring to deals with the bubble phase specifically. IE's model doesn't support event capturing - full stop. the capture phase is what precedes the bubbling phase:

不，事件侦听器不会阻止任何事件的传播，除非您明确告诉它。您所指的部分专门处理泡沫阶段。IE 的模型不支持事件捕获 - 句号。捕获阶段是冒泡阶段之前的阶段：

Top of the DOM --->event--->traverses--->to--->[target]+[event]-| (capture phase)
      /\                                                       \/
      |------------------------to--------back up-----------------  (bubble up)

回答by LeOn - Han Li

Short answer: The order is:

简短回答：顺序是：

1. Capture (down)
2. Target
3. Bubble (up).

1. 捕捉（下）
2. 目标
3. 冒泡）。

If you call e.stopPropagation()in the capture phase (by setting the addEventListener()'s 3rd argumentto true), it stops at 1, so 2 & 3 cannot receive it.

如果您e.stopPropagation()在捕获阶段调用（通过将addEventListener()的第三个参数设置为true），它会在 1 处停止，因此 2 和 3 无法接收它。

If you call e.stopPropagation()in the bubble phase (by setting the addEventListener()'s 3rd argumentto falseor just not assign it), the 1 & 2 already complete, so it just prevents the event from bubbling up from the level where you call stopPropagation().

如果您e.stopPropagation()在冒泡阶段调用（通过将addEventListener()第3 个参数设置为false或不分配它），则 1 和 2 已经完成，因此它只会防止事件从您调用的级别冒泡stopPropagation()。

回答by Ravi Gidwani

stopPropagation() will not stop the captured event handler from getting called. stopPropagation() will stop the bubbled event handler from getting called.

stopPropagation() 不会阻止捕获的事件处理程序被调用。stopPropagation() 将阻止冒泡事件处理程序被调用。

Jsfiddle

提琴手

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);

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

<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>