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

Question

我在看http://www.quirksmode.org/js/events_order.html，这部分内容模棱两可：

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

window.event.cancelBubble = true

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

e.stopPropagation()

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

所以我的问题是：

• 当事件侦听器设置为在捕获阶段侦听时，它是否会自动不再继续传播到内部元素？
• 或者如果它继续传播，是否调用e.stopPropagation() 会阻止它，还是只对冒泡阶段有效？

Answer 1

简答：顺序是：

1. 捕获（向下）
2. 目标
3. 气泡（向上）。

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

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

Answer 2

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

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

Answer 3

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>