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

Question

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

In the Microsoft model you must set the event’s cancelBubble property 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.

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?

Answer 1

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:

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

Answer 2

Short answer: The order is:

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

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

If you call e.stopPropagation() in the bubble phase (by setting the addEventListener()'s 3rd argument to false or 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().

Answer 3

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

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>