javascript - 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() 将阻止冒泡事件处理程序被调用。

提琴手

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>