Question

我在看http://www.quirksmode.org/js/events_order.html，这一部分含糊不清：

在Microsoft模型中，您必须将事件的cancelBubble属性设置为true。
window.event.cancelBubble = true
在W3C模型中，您必须调用事件的stopPropagation()方法。
e.stopPropagation()
这会阻止事件在冒泡阶段的所有传播。

所以我的问题是：

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

Answer 1

简答：订单是：

捕获（向下）
目标
泡泡（向上）。

如果您在捕获阶段致电e.stopPropagation()（通过将addEventListener()的第三个参数设置为 true ），它停在1，所以2＆amp; 3不能接收它。

如果您在泡泡阶段致电e.stopPropagation()（将addEventListener()的第三个参数设置为 false 或仅不分配它，1＆amp; 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>

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

3 个答案: