是否stopPropgation从捕获阶段传播停止的事件吗？(Does stopPropgation

我看着http://www.quirksmode.org/js/events_order.html正是在这一部分含糊：

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

所以我的问题是：

当一个事件监听器被设置在捕获阶段听，它会自动再继续传播到内部元素？
或者如果它继续传播，并呼吁e.stopPropagation()停止它，还是只为泡沫阶段的工作？

Answer 1:

不，事件侦听器不会停止传播任何事件，除非您明确告诉它。该部分你指的是涉及泡沫阶段明确。 IE浏览器的模型不支持事件捕获 - 句号。捕获阶段是冒泡阶段什么先：

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

Answer 2:

简短的回答：顺序是：

捕获（下）
目标
冒泡）。

如果调用e.stopPropagation()在捕获阶段（通过设置addEventListener()的第三个参数来true ），它停在1，SO 2和3不能接收。

如果调用e.stopPropagation()在泡沫阶段（通过设置addEventListener()的第三个参数 ，以false或者只是不给它分配），1＆2已经完成，所以它只是阻止事件从向上冒泡水平，你调用stopPropagation()

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>

文章来源: Does stopPropgation stop the event from propagating in the capture phase?